import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"
import SwiperCore, { Autoplay, Pagination } from "swiper"
import { Swiper, SwiperSlide } from "swiper/react"
import Background from "@/components/background"
import Container from "@/components/container"
import CustomLink from "@/components/home/latest-info/link"
import * as styles from "./index.module.scss"

SwiperCore.use([Autoplay, Pagination])

const EducationBanner: React.FC = () => {
  const dataQuery = useStaticQuery<StrapiEducationBannersQuery>(graphql`
    query StrapiEducationBannersQuery {
      allStrapiEducationBanners(sort: { fields: order, order: ASC }) {
        nodes {
          image {
            media {
              width
              url
              height
            }
          }
          description
          title
          link
          id
        }
      }
    }
  `)

  const banners: EducationBanners[] =
    dataQuery.allStrapiEducationBanners.nodes || []

  const getBannerContent = (list: EducationBanners) => {
    if (list.link) {
      return (
        <CustomLink className={styles.educationBannerLink} linkTo={list.link}>
          <Container>{getBannerText(list)}</Container>
        </CustomLink>
      )
    } else {
      return <Container>{getBannerText(list)}</Container>
    }
  }

  const getBannerText = (list: EducationBanners) => {
    return (
      <div className={styles.educationBannerInner}>
        {list.title && <h1>{list.title}</h1>}
        {list.description && <h5>{list.description}</h5>}
      </div>
    )
  }

  return (
    <div>
      {banners.length > 0 && (
        <div className={styles.educationBannerRegion}>
          <Swiper
            pagination={{ el: ".swiper-pagination", clickable: true }}
            loop={true}
            autoplay={{
              delay: 5000,
              disableOnInteraction: false,
            }}
          >
            {banners.map(list => (
              <SwiperSlide key={list.id}>
                {
                  <Background
                    className={styles.educationBanner}
                    image={list.image}
                  >
                    {getBannerContent(list)}
                  </Background>
                }
              </SwiperSlide>
            ))}
          </Swiper>
          <div className="swiper-pagination"></div>
        </div>
      )}
    </div>
  )
}

export default EducationBanner