// Swiper
import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'

import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import { useMemo } from 'react'
import Link from '@/core/components/elements/Link/Link'
import Image from 'next/image'
import { useQuery } from 'react-query'
import { bannerApi } from '@/api/bannerApi'
import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'

const swiperBanner = {
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  modules: [Pagination, Autoplay],
  loop: true,
  className: 'border border-gray_r-6 min-h-full',
  slidesPerView: 1
}

const HeroBanner = () => {
  const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' }))

  const swiperBannerMobile = {
    ...swiperBanner,
    pagination: { dynamicBullets: true, clickable: true }
  }

  const swiperBannerDesktop = {
    ...swiperBanner,
    pagination: { dynamicBullets: false, clickable: true }
  }

  const BannerComponent = useMemo(() => {
    return heroBanner.data?.map((banner, index) => (
      <SwiperSlide key={index}>
        <Link href={banner.url} className='w-full h-auto'>
          <Image
            src={banner.image}
            alt={banner.name}
            width={1152}
            height={768}
            className='w-full h-auto'
          />
        </Link>
      </SwiperSlide>
    ))
  }, [heroBanner.data])

  if (heroBanner.isLoading) return <HeroBannerSkeleton />

  return (
    heroBanner.data && (
      <>
        <MobileView>
          <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
        </MobileView>

        <DesktopView>
          <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
        </DesktopView>
      </>
    )
  )
}

export default HeroBanner