import * as React from "react"
import cls from "classnames"

import Container from "@/components/container"
import DetailBackground from "@/components/background/detail-background"

import * as styles from "./index.module.scss"
import { mergeNomalDataAndFileData, trimProps } from "@/utils"
import { RETURN_BUTTON_KEY } from "@/constants/common"
import ReturnButton from "@/components/return-button"

type HeaderProps = {
  solutionDetail: SolutionDetail
  location: Location
}

export const HeaderBar: React.FC<HeaderProps> = props => {
  const { banner, title, description, keyWords: words } = props.solutionDetail
  const {
    customerProfile,
    whitePaperLink,
    pdfLink,
    author,
    pathname = "",
  } = mergeNomalDataAndFileData(trimProps(props))

  const isPractice = pathname.includes("best-practice-detail")
  const isJointSolution = pathname.includes("joint-solution-detail")
  const isInsight = pathname.includes("insight-detail")
  const isCompanyNews = pathname.includes("company-news-detail")
  const isCoverNewsDetail = pathname.includes("cover-news-detail")

  const showCustomerProfile = Boolean(customerProfile)
  const showAuthorIntroduction = Boolean(
    Boolean(author?.description.trim()) && !isCompanyNews && !isCoverNewsDetail
  )
  const showWhitePaper = Boolean(whitePaperLink && !isJointSolution)
  const showJointSolution = Boolean(isJointSolution)
  const showPractice = Boolean(isPractice)
  const showPracticePdf = Boolean(isPractice && pdfLink)
  const showShareBox = Boolean(isInsight || isCompanyNews || isCoverNewsDetail)

  const showAllRightColumn = Boolean(
    showCustomerProfile ||
      showAuthorIntroduction ||
      showWhitePaper ||
      showJointSolution ||
      showPractice ||
      showPracticePdf ||
      showShareBox
  )
  const keyWords = Array.from(new Set(words))

  return (
    <DetailBackground url={banner?.media?.url}>
      <Container className={styles.container} isSmall={!showAllRightColumn}>
        <h1>{title}</h1>
        <p className={cls(styles.description, "pt-4")}>{description}</p>
        {keyWords && (
          <div className={cls(styles.tagContainer)}>
            {keyWords.map(tag => (
              <span className="mt-5" key={tag}>
                {tag}
              </span>
            ))}
          </div>
        )}
        <ReturnButton pageKey={RETURN_BUTTON_KEY.SOLUTION} />
      </Container>
    </DetailBackground>
  )
}