import cls from "classnames"
import React from "react"
import * as styles from "./index.module.scss"
import t from "@/constants/wording"
import Container from "@/components/container"
import Markdown from "@/components/markdown"
import MarkdownCatalogue from "@/components/markdown-catalogue"
import CustomerProfile from "@/components/detail/customer-profile"
import DetailCard from "@/components/detail/detail-card"
import AuthorAndDate from "@/components/detail/author-and-date"
import { CustomLink } from "@/components"
import ShareBox from "@/components/share-box"
import JointSolutionDetailCard from "@/components/detail/joint-solution-detail-card"
import { trimProps, mergeNomalDataAndFileData } from "@/utils"

const DetailContent: React.FC<
  DetailContentProps & { myLocation: ILocation }
> = props => {
  const {
    title,
    body,
    customerProfile,
    whitePaperLink,
    pdfLink,
    author,
    date = "",
    href,
    pathname = "",
    logo,
    myLocation,
  } = 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 showAuthor = Boolean(author?.name.trim())
  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
  )

  return (
    <Container isSmall={!showAllRightColumn}>
      {showAllRightColumn ? (
        <div className={cls("columns", styles.content)}>
          <div className="column is-8 px-4">
            {showAuthor && <AuthorAndDate name={author.name} date={date} />}
            <Markdown body={body} needAnchor={isPractice} />
          </div>
          <div className={cls("column is-4 px-4", styles.cardsColumns)}>
            {showCustomerProfile && (
              <CustomerProfile profile={customerProfile} pdfLink={pdfLink} location={myLocation} />
            )}
            {showAuthorIntroduction && (
              <DetailCard
                header={t("author introduction")}
                content={author.description}
                footer={t("contact us")}
                link="/contact"
                isBlankLine={true}
              />
            )}
            {showWhitePaper && (
              <DetailCard
                header={t("white paper title")}
                content={t("white paper content")}
                footer={t("white paper file")}
                link={whitePaperLink}
              />
            )}
            {showJointSolution && (
              <JointSolutionDetailCard
                logo={logo}
                whitePaperLink={whitePaperLink}
              />
            )}
            {showPractice && (
              <DetailCard header={t("catalogue")} className={styles.catalogue}>
                <MarkdownCatalogue body={body} />
              </DetailCard>
            )}
            {showPracticePdf && (
              <CustomLink
                linkTo={pdfLink}
                className="button is-primary is-medium"
                attrs={{ style: { width: "100%", marginBottom: "2rem" } }}
              >
                {t("download practice PDF")}
              </CustomLink>
            )}
            {showShareBox && (
              <div className={styles.shareBox}>
                <p>文章分享至：</p>
                <ShareBox
                  url={href}
                  title={title}
                  className={styles.shareContainer}
                />
              </div>
            )}
          </div>
        </div>
      ) : (
        <div className={styles.content}>
          {showAuthor && <AuthorAndDate name={author.name} date={date} />}
          <Markdown body={body} needAnchor={isPractice} />
        </div>
      )}
    </Container>
  )
}

export default DetailContent