import * as React from "react"
import * as styles from "./index.module.scss"
import { useStaticQuery, graphql } from "gatsby"
import { formatDate } from "@/utils"
import { Container, CustomLink, Icon } from "@/components"
import VideoPlayer from "@/components/video-play"
import { ABOUT_US_COVER_NEWS_TYPE_VALUE } from "@/constants/about-us"

interface ICoverNews {
  id: string
  title: string
  author: string
  date: string
  body: string
  logo: ImageComponent
  media: {
    url: string
    mime: string
  }
  type: string
}

const CoverNews: React.FC = () => {
  const { strapiAboutUsCoverNews } = useStaticQuery<{
    strapiAboutUsCoverNews: ICoverNews
  }>(
    graphql`
      query FatchStrapiAboutUsCoverNews {
        strapiAboutUsCoverNews {
          id
          title
          author
          date
          body
          logo {
            alt
            media {
              url
            }
          }
          media {
            url
            mime
          }
          type
        }
      }
    `
  )

  const { title, date, body, logo, media, type } = strapiAboutUsCoverNews
  const isVideo = media.mime.includes("video")
  const [modalShow, setModalShow] = React.useState(false)

  const toggleVideoModalShow = () => {
    setModalShow(!modalShow)
  }
  const CustomLinkAttr = {
    linkTo:
      type === ABOUT_US_COVER_NEWS_TYPE_VALUE[0]
        ? "/about-us/cover-news-detail"
        : body,
  }

  return (
    <>
      <Container isSmall={true}>
        <div className={styles.coverNews}>
          {isVideo ? (
            <figure className={styles.figure}>
              <img
                className={styles.videoShot}
                src={`${media.url}?x-oss-process=video/snapshot,t_1,f_png`}
              ></img>
              <div className={styles.videoMask} onClick={toggleVideoModalShow}>
                <Icon name="play" className={styles.playIcon} />
              </div>
            </figure>
          ) : (
            <CustomLink {...CustomLinkAttr}>
              <figure className={styles.figure}>
                <img src={media.url} className={styles.image} />
              </figure>
            </CustomLink>
          )}
          <CustomLink {...CustomLinkAttr} className={styles.rightContent}>
            <figure className={styles.logo}>
              <img src={logo.media.url} alt={logo.alt} />
            </figure>

            <div className={styles.title}>
              <h4>{title}</h4>
              <p>{formatDate(date)}</p>
            </div>
          </CustomLink>
        </div>
      </Container>
      {isVideo && (
        <VideoPlayer
          link={media.url}
          close={toggleVideoModalShow}
          play={modalShow}
        ></VideoPlayer>
      )}
    </>
  )
}

export default CoverNews