import 'swiper/css';

import Image from 'next/image';
import { useEffect, useMemo } from 'react';
import { useQuery } from 'react-query';
import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';

import { getBanner } from '~/services/banner';
import style from '../styles/hero.module.css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import  { Navigation, Pagination, Autoplay } from 'swiper';
import MobileView from '../../../../src/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';

const swiperBanner: SwiperProps = {
  modules:[Navigation, Pagination, Autoplay],
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  loop: true,
  className: 'h-[400px] w-full',
  slidesPerView: 1,
  spaceBetween: 10,
  pagination:true,
}
const swiperBannerMob = {
  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
  },
  modules: [Pagination, Autoplay],
  loop: true,
  className: 'border border-gray_r-6 min-h-full',
  slidesPerView: 1,
};

const Hero = () => {
  const bannerQuery = useQuery({
    queryKey: ['banner.all-promo'],
    queryFn: () => getBanner({ type: 'banner-promotion' })
  })

  const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);

  useEffect(() => {
    if (banners.length > 1) {
      swiperBanner.slidesPerView = 1.1;
      swiperBanner.loop = true;
      swiperBannerMobile.loop = true;
    }
  }, [banners]);

  const swiperBannerMobile = {
    ...swiperBannerMob,
    pagination: { dynamicBullets: false, clickable: true },
  };

  return (
    <>
      <DesktopView>
        <div className={style['wrapper']}>
          <div className={style['desc-section']}>
            <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
            <div className='h-4' />
            <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
          </div>

          <div className={style['banner-section']}>
            <Swiper {...swiperBanner}>
              {banners.map((banner, index) => (
                <SwiperSlide key={index}>
                  <Image
                    src={banner.image}
                    alt={banner.name}
                    width={666}
                    height={450}
                    quality={100}
                    className='w-full h-full object-fit object-center rounded-2xl' />
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      </DesktopView>
      <MobileView>
          <Swiper {...swiperBannerMobile}>
            {banners?.map((banner, index) => (
              <SwiperSlide key={index}>
                    <Image
                      width={439}
                      height={150}
                      quality={100}
                      src={banner.image}
                      alt={banner.name}
                      className='w-full h-full object-cover object-center rounded-2xl'
                    />
              </SwiperSlide>
            ))}
          </Swiper>
          
      </MobileView>
    </>
  )
}

export default Hero