import * as React from "react"

import Layout from "@/components/layout"
import Seo from "@/components/seo"
import { Banner, CaseList, Container, SolutionList } from "@/components"
import t from "@/constants/wording"
import ContactUs from "@/components/solution/contact-us"
import TalkSection from "@/components/talk-section"
import NotFoundPage from "@/pages/404"
import Markdown from "@/components/markdown"

import * as styles from "./detail.module.scss"

type IProps = {
  pageContext: { eventDetail: StrapiEvent }
  location: ILocation
}

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

  const {
    // id,
    seoTitle,
    seoDescription,
    seoKeywords,
    bannerTitle,
    bannerImage,
    title,
    summary,
    eventTalk,
    solutions,
    customerCases
  } = eventDetail
  const seoProps = {
    title: seoTitle,
    description: seoDescription || t("keywords"),
    keywords: seoKeywords?.join(",")
  }
  return (
    <Layout>
      <Seo {...seoProps} />
      <Banner
        title={bannerTitle}
        subtitle={""}
        image={{ media: bannerImage }}
      />
      <Container>
        <Summary>
          <Markdown body={summary} needAnchor={false} />
        </Summary>
        <Title>{title}</Title>
        <Content data={eventTalk} />
      </Container>
      <CaseList
        title="相关案例"
        data={customerCases}
        className={styles.caseList}
      />
      <SolutionList title="相关解决方案" data={solutions} />
      <ContactUs location={location} />
    </Layout>
  )
}

const Summary: React.FC = ({ children }) => {
  return <div className={styles.summary}>{children}</div>
}

const Title: React.FC = ({ children }) => {
  return <h2 className={styles.title}>{children}</h2>
}

const Content = ({ data }: { data?: EventTalk[] }) => {
  return (
    <div className={styles.content}>
      {data?.map((value: EventTalk) => (
        <TalkSection {...value} />
      ))}
    </div>
  )
}

export default EventDetail