import * as React from "react"
import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { HeaderBar as InsightHeaderBar } from "@/components/header-bar/insight-header-bar"
import RelatedCards from "@/components/related-cards"
import NotFoundPage from "@/pages/404"
import DetailContent from "@/components/detail/content"
import LinkModule from "@/components/link-module"
import t from "@/constants/wording"

type IProps = {
  pageContext: { insightDetail: InsightDetail }
  location: Location
  myLocation: ILocation
}

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

  const {
    title,
    description,
    lable: label,
    relatedCases = [],
    relatedInsights = [],
  } = insightDetail

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

  const relatedInsightsFormat: RelatedCard[] = relatedInsights
    ? relatedInsights.map(item => item.insight)
    : []

  const seoProps = {
    title,
    description: description || t("Insight Detail"),
    keywords: label || t("keywords"),
  }

  return (
    <Layout>
      <Seo {...seoProps} />
      <InsightHeaderBar {...insightDetail} />
      <DetailContent {...insightDetail} {...location} myLocation={myLocation} />
      <RelatedCards
        styleName={relatedCasesFormat.length > 1 ? "leftFirst" : "left"}
        type="insight"
        cards={relatedInsightsFormat}
        title={<h2>相关行业洞见</h2>}
        footer={<LinkModule to={"/insight"}>查看全部行业洞见</LinkModule>}
      />
      <RelatedCards
        styleName="left"
        type="case"
        cards={relatedCasesFormat}
        title={<h2>相关客户案例</h2>}
        footer={<LinkModule to={"/case"}>查看全部案例</LinkModule>}
      />
    </Layout>
  )
}

export default InsightDetailPage