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={85}
                    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={85}
                src={banner?.image}
                alt={banner?.name}
                className='w-full h-full object-cover object-center rounded-2xl'
              />
            </SwiperSlide>
          ))}
        </Swiper>
      </MobileView>
    </>
  );
};

export default Hero;