import DesktopView from '@/core/components/views/DesktopView'
import MobileView from '@/core/components/views/MobileView'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Pagination, Autoplay } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/autoplay'
import { useMemo } from 'react'
import Link from '@/core/components/elements/Link/Link'
import Image from '@/core/components/elements/Image/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',
  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} className='w-full h-auto' />
        </Link>
      </SwiperSlide>
    ))
  }, [heroBanner.data])

  if (heroBanner.isLoading) return <HeroBannerSkeleton />

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

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

export default HeroBanner
