import * as React from "react"
import Layout from "@/components/layout"
import Seo from "@/components/seo"
import FreeExperience from "@/components/free-experience"
import { HeaderBar as CaseHeaderBar } from "@/components/header-bar/case-header-bar"
import RelatedCards from "@/components/related-cards"
import NotFoundPage from "@/pages/404"
import DetailContent from "@/components/detail/content"
import CustomerSaying from "@/components/detail/customer-saying"
import LinkModule from "@/components/link-module"
import t from "@/constants/wording"

type IProps = {
  pageContext: { caseDetail: CaseDetail }
  location: Location
  myLocation: ILocation
}

const CaseDetailPage: React.FC<IProps> = ({ pageContext, location, myLocation }) => {
  const { caseDetail } = pageContext
  if (!caseDetail) return <NotFoundPage />

  let {
    title,
    description,
    industry,
    scene,
    relatedCases = [],
    relatedSolutions = [],
  } = caseDetail

  const relatedCasesFormat: RelatedCard[] = relatedCases
    ? relatedCases.map(item => item.customerCase)
    : []

  const relatedSolutionsFormat: RelatedCard[] = relatedSolutions
    ? relatedSolutions.map(item => item.solution)
    : []

  const customerQuote = caseDetail.customerProfile
    ? caseDetail.customerProfile.customerQuote
    : null

  let keywords: string
  const keywordArr = []
  if (industry) keywordArr.push(industry)
  if (scene) keywordArr.push(scene)
  keywords = keywordArr.length !== 0 ? keywordArr.join(",") : t("keywords")

  const seoProps = {
    title,
    description: description ?? t("Case Detail"),
    keywords
  }

  return (
    <Layout>
      <Seo {...seoProps} />
      <CaseHeaderBar {...caseDetail} />
      {customerQuote && customerQuote.quote.trim() && (
        <CustomerSaying saying={customerQuote} />
      )}
      <DetailContent {...caseDetail} {...location} myLocation={myLocation} />
      <RelatedCards
        styleName={relatedCasesFormat.length > 1 ? "leftFirst" : "left"}
        type="solution"
        cards={relatedSolutionsFormat}
        title={<h2>相关解决方案</h2>}
        footer={<LinkModule to={"/solution"}>查看全部解决方案</LinkModule>}
      />
      <RelatedCards
        styleName="left"
        type="case"
        cards={relatedCasesFormat}
        title={<h2>更多客户案例</h2>}
        footer={<LinkModule to={"/case"}>查看全部案例</LinkModule>}
      />
      <FreeExperience />
    </Layout>
  )
}

export default CaseDetailPage