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 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';
import {bannerApi} from '../../../../src/api/bannerApi'

interface IPromotionProgram {
  headlineBanner: string;
  descriptionBanner: string;
  image: string ;
  name: string;
}

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 heroBanner = useQuery('allPromo', bannerApi({ type: 'banner-semua-promo' }));

  const banners: IPromotionProgram[] = useMemo(
    () => heroBanner?.data || [],
    [heroBanner.data]
  );

  const swiperBannerMobile = {
    ...swiperBannerMob,
    pagination: { dynamicBullets: false, clickable: true },
  };
  
  return (
    <>
      <DesktopView>
        <div className={style['wrapper']}>
            <Swiper {...swiperBanner}>
              {banners.map((banner, index) => (
                <SwiperSlide key={index} className='flex flex-row'>
                  <div className={style['desc-section']}>
                    <div className={style['title']}>{banner.headlineBanner? banner.headlineBanner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div>
                    <div className='h-4' />
                    <div className={style['subtitle']}>{banner.descriptionBanner? banner.descriptionBanner : "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']}>
                    <Image
                      src={banner.image}
                      alt={banner.name}
                      width={666}
                      height={450}
                      quality={90}
                      className='w-full h-full object-fit object-center rounded-2xl' />
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
        </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