import * as React from "react"
import { useStaticQuery, graphql } from "gatsby"

import { Layout, Seo } from "@/components"
import ProductBanner from "@/components/product/banner"
import NewVersion from "@/components/product/new-version"
import HistoryVersion from "@/components/product/history-version"
import t from "@/constants/wording"
import { compareVersion } from "@/utils/versionUtil"

const ProductCommunity: React.FC = () => {
  const data = useStaticQuery<ProductCommunityQuery>(graphql`
    query StrapiProductCommunityQuery {
      strapiProductPage {
        communityBg {
          media {
            url
            width
            height
          }
        }
      }
      allStrapiProductCommunityVersionInfos {
        nodes {
          description
          feature {
            description
            id
          }
          serverLink
          toolkitLink
          serverLinkArm
          toolkitLinkArm
          version
          id
          manualChinese
          manualEnglish
        }
      }
    }
  `)

  const bannerBg = data.strapiProductPage.communityBg
  const versionData = data.allStrapiProductCommunityVersionInfos.nodes || []

  const getVersionNumber = (item: ProductCommunityVersionInfos) => {
    const result = item.version.match(/^\D+(\d+.\d+.\d+)/)
    return result?.[1] ?? ""
  }

  versionData.sort((a, b) =>
    compareVersion(getVersionNumber(a), getVersionNumber(b))
  )

  return (
    <Layout>
      <Seo
        title={`TiDB ${t("community")}`}
        description={`TiDB ${t("community")}`}
        keywords={t("keywords")}
      />
      <ProductBanner
        isSmall={true}
        bannerBg={bannerBg}
        text={`TiDB ${t("community")}`}
      />
      {versionData && versionData.length > 0 && (
        <NewVersion data={versionData[0]} />
      )}
      {versionData && versionData.length > 1 && (
        <HistoryVersion data={versionData.slice(1)} />
      )}
    </Layout>
  )
}

export default ProductCommunity