import React, { useEffect } from "react"
import { graphql, useStaticQuery } from "gatsby"
import { Layout, Seo } from "@/components"
import AboutUsBanner from "@/components/about-us/about-us-banner"
import AboutUsTab from "@/components/about-us/about-us-tab"
import queryString from "querystring"
import t from "@/constants/wording"

const AboutUsPage: React.FC = () => {
  const data = useStaticQuery<AboutUsQuery>(graphql`
    query StrapiAboutUsBannerQuery {
      strapiAboutUsOverview {
        banner {
          media {
            url
          }
          alt
        }
        title
        subtitle
      }
    }
  `)

  const { banner, title, subtitle } = data.strapiAboutUsOverview

  const { tab, subTab = "" } = queryString.parse(
    typeof window !== "undefined" ? window.location.search.replace("?", "") : ""
  ) as { [key: string]: string }

  useEffect(() => {
    if (
      tab !== "companyOverview" &&
      tab !== "developmentPath" &&
      tab !== "news"
    ) {
      location.href = "/about-us?tab=companyOverview"
    }
  }, [tab])

  return (
    <Layout>
      <Seo
        title={t("AboutUs.PingCAP")}
        description={t("PingCAP is the team behind the HTAP database TiDB")}
        keywords={t("keywords")}
      />
      <AboutUsBanner title={title} subtitle={subtitle} image={banner} />
      <AboutUsTab tabText={tab} subTabText={subTab} />
    </Layout>
  )
}

export default AboutUsPage