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-auto w-full',
  slidesPerView: 1,
  spaceBetween: 0,
  pagination: { clickable: true },
};

const swiperBannerMob = {
  autoplay: {
    delay: 6000,
    disableOnInteraction: false,
  },
  modules: [Pagination, Autoplay],
  loop: true,
  className: 'mobile-swiper w-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 (
    <>
      <style jsx global>{`
        @media (max-width: 768px) {
          .mobile-swiper .swiper-pagination-bullet {
            width: 6px !important;
            height: 6px !important;
            margin: 0 3px !important;
          }
          .mobile-swiper .swiper-pagination-bullet-active {
            width: 6px !important;
            height: 6px !important;
            background: red !important;
          }
        }
      `}</style>
      <DesktopView>
        <div className={style['desktop-container']}>
          <Swiper {...swiperBanner} spaceBetween={10}>
            {banners?.map((banner, index) => (
              <SwiperSlide key={index} className='flex flex-row'>
                
                {/*  
                <div className={style['desc-section']}>
                  <div className={style['title']}>
                     ...
                  </div>
                </div> 
                */}

                <div className={style['desktop-image-wrapper']}>
                  <Image
                    src={banner.image}
                    alt={banner.name}
                    fill
                    priority
                    quality={100}
                    className={style['banner-image']}
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </DesktopView>
      <MobileView>
        <div className={style['mobile-container']}>
          <Swiper {...swiperBannerMobile}>
            {banners?.map((banner, index) => (
              <SwiperSlide key={index}>
                <div className={style['mobile-image-wrapper']}>
                  <Image
                    src={banner?.image}
                    alt={banner?.name}
                    fill
                    quality={85}
                    className={style['banner-image']}
                  />
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </MobileView>
    </>
  );
};

export default Hero;