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

import Background from "@/components/background"
import VideoPlayer from "@/components/video-play"
import t from "@/constants/wording"

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

const { useState } = React
const ProductIntroduce = () => {
  const data = useStaticQuery<FetchProductDataQuery>(graphql`
    query FetchProductIntroduceQuery {
      strapiProductPage {
        videoAboutTiDB {
          media {
            url
            width
            height
          }
        }
      }
      strapiStaticDocResources(name: { eq: "tidb introduction" }) {
        video {
          url
        }
      }
    }
  `)
  const {
    strapiProductPage: { videoAboutTiDB },
    strapiStaticDocResources: {
      video: { url },
    },
  } = data

  const [isPlaying, setPlayState] = useState(false)
  const close = () => {
    setPlayState(!isPlaying)
  }
  const title = t("product-video-title")
  return (
    <>
      <Background image={videoAboutTiDB} className={styles.backGroundContainer}>
        <div
          className={cls(
            "is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
          )}
        >
          <div
            className={cls(
              styles.contentWrapper,
              "is-flex is-flex-direction-column is-align-items-center is-justify-content-center"
            )}
          >
            <h1 className="px-4">{title}</h1>
            <i
              className="iconfont icon-play"
              style={{ fontSize: "5.5rem" }}
              onClick={() => {
                setPlayState(true)
              }}
            ></i>
          </div>
        </div>
      </Background>
      <VideoPlayer link={url} play={isPlaying} close={close} />
    </>
  )
}

export default ProductIntroduce