import * as React from "react"
import cls from "classnames"
import { graphql, useStaticQuery } from "gatsby"
import { Container } from "@/components"
import SwiperContainer from "@/components/swiper"
import VideoPlayer from "@/components/video-play"
import VideoCard from "./video-card"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

const sectionTitle = t("customers's view")
interface VideoItemList {
  title: string
  image: imgMedia
  link: string
}

const VideoSection: React.FC = () => {
  const data = useStaticQuery<CaseVideoQuery>(graphql`
    {
      allStrapiCasesCooperationStories(sort: { fields: order, order: ASC }) {
        edges {
          node {
            title
            image {
              alt
              media {
                width
                url
                height
              }
            }
            video {
              url
            }
          }
        }
      }
    }
  `)

  const [videoItemList, setVideoItemList] = React.useState<
    Array<VideoItemList>
  >([])

  const {
    allStrapiCasesCooperationStories: { edges = [] },
  } = data

  React.useEffect(() => {
    setVideoItemList(
      edges.map(edgeNode => {
        const { image, video, title } = edgeNode.node
        return {
          title,
          image,
          link: video.url,
        }
      })
    )
  }, [])

  const [modalShow, setModalShow] = React.useState(false)
  const [videoLink, setVideoLink] = React.useState("")
  const videoModalShow = (link?: string) => {
    setVideoLink(link || "")
    setModalShow(!modalShow)
  }

  return (
    <section className={cls("common-region-grey", styles.videoContainer)}>
      <Container>
        <h1 className="common-h1-title">{sectionTitle}</h1>
      </Container>
      <SwiperContainer listData={videoItemList} className={styles.caseSwiper}>
        {(item: VideoItemList) => (
          <VideoCard {...item} videoModalShow={videoModalShow} />
        )}
      </SwiperContainer>
      <VideoPlayer link={videoLink} close={videoModalShow} play={modalShow} />
    </section>
  )
}

export default VideoSection