import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"
import SwiperCore, { Autoplay, Pagination } from "swiper"

import * as styles from "./index.module.scss"
import Background from "@/components/background"
import CustomLink from "@/components/home/latest-info/link"
import { Swiper, SwiperSlide } from "swiper/react"
import { getLinkWithPathPrefix } from "@/utils"

SwiperCore.use([Autoplay, Pagination])

const Banner: React.FC = () => {
  const data = useStaticQuery<HomeStrapiBannerQuery>(graphql`
    query StrapiBannerQuery {
      allStrapiBanner(sort: { fields: order, order: ASC }) {
        edges {
          node {
            id
            link
            image {
              alt
              media {
                width
                url
                height
              }
            }
            mobileImage {
              alt
              media {
                url
              }
            }
          }
        }
      }
    }
  `)

  const banners = data.allStrapiBanner.edges

  return (
    <section>
      <div className={styles.homeBanner}>
        <Swiper
          pagination={{ el: ".swiper-pagination", clickable: true }}
          loop={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
        >
          {banners.map(banner => (
            <SwiperSlide key={banner.node.id}>
              <CustomLink linkTo={getLinkWithPathPrefix(banner.node.link)}>
                <Background
                  image={banner.node.image}
                  className={`${styles.bannerBackground} is-hidden-touch`}
                  isShowMask={false}
                />
                <div className="image">
                  <img
                    src={banner.node.image.media.url}
                    className={"is-hidden-desktop is-hidden-mobile"}
                  />
                  <img
                    src={banner.node.mobileImage.media.url}
                    className={"is-hidden-desktop is-hidden-tablet-only"}
                  />
                </div>
              </CustomLink>
            </SwiperSlide>
          ))}
        </Swiper>
        <div className="swiper-pagination" />
      </div>
    </section>
  )
}

export default Banner