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  { Autoplay, Navigation, Pagination } from 'swiper';

const swiperBanner: SwiperProps = {
  modules:[Navigation, Pagination, Autoplay],
  autoplay: {
    delay: 6000,
    disableOnInteraction: false
  },
  loop: true,
  className: 'h-[400px] w-full',
  slidesPerView: 1,
  spaceBetween: 10,
  navigation:true,
}
const swiperBanner2: SwiperProps = {
  modules: [Pagination, Autoplay],
  autoplay: {
    delay: 5000,
  },
  loop: true,
  className: 'h-[400px] w-full',
  slidesPerView: 1,
  spaceBetween: 10,
}

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;
      swiperBanner.loop = true;
    }
  }, [banners]);

  return (
    
    <div className="grid grid-cols-3 gap-4">
        <div className="row-span-2 h-[446px] flex items-center ">
            <Swiper {...swiperBanner}>
            {banners.map((banner, index) => (
                <SwiperSlide key={index}>
                <Image
                    src={banner?.image}
                    alt={banner?.name}
                    width={666}
                    height={480}
                    className='w-[446px]  h-[446px] object-fill object-center rounded-2xl'
                />
                </SwiperSlide>
            ))}
            </Swiper>
        </div>
        <div className="w-[400px] h-[217px] ">
        <Swiper {...swiperBanner2}>
          {banners.map((banner, index) => (
            <SwiperSlide key={index}>
              <Image
                src={banner?.image}
                alt={banner?.name}
                width={666}
                height={450}
                className='w-[400px] h-[217px] object-cover object-center rounded-2xl '
              />
            </SwiperSlide>
          ))}
        </Swiper>
        </div>
        <div className="w-[400px] h-[217px]">
        <Swiper {...swiperBanner2}>
          {banners.map((banner, index) => (
            <SwiperSlide key={index}>
              <Image
                src={banner?.image}
                alt={banner?.name}
                width={666}
                height={450}
                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
              />
            </SwiperSlide>
          ))}
        </Swiper>
        </div>
        <div className="w-[400px] h-[217px]">
            <Swiper {...swiperBanner2}>
          {banners.map((banner, index) => (
            <SwiperSlide key={index}>
              <Image
                src={banner?.image}
                alt={banner?.name}
                width={666}
                height={450}
                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
              />
            </SwiperSlide>
          ))}
        </Swiper>
        </div>
        <div className="w-[400px] h-[217px]">
        <Swiper {...swiperBanner2}>
          {banners.map((banner, index) => (
            <SwiperSlide key={index}>
              <Image
                src={banner?.image}
                alt={banner?.name}
                width={666}
                height={450}
                className='w-[400px] h-[217px] object-cover object-center rounded-2xl'
              />
            </SwiperSlide>
          ))}
        </Swiper>
        </div>
        
    </div>
  
    
    
  )
}

export default Hero