import Link from '@/core/components/elements/Link/Link';
import Image from 'next/image';
import { bannerApi } from '@/api/bannerApi';
import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';
import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton';
import { useEffect, useState } from 'react';
const { useQuery } = require('react-query');
const BannerSection = () => {
  const { isMobile, isDesktop } = useDevice();
  const [data, setData] = useState(null);
  const [shouldFetch, setShouldFetch] = useState(false);
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(`/api/hero-banner?type=banner-promotion`);
      const { data } = await res.json();
      if (data) {
        setData(data);
      }
    };

    fetchData();
  }, []);

  // useEffect(() => {
  //   const localData = localStorage.getItem('Homepage_promotionProgram');
  //   if (localData) {
  //     setData(JSON.parse(localData));
  //   } else {
  //     setShouldFetch(true);
  //   }
  // }, []);

  // const getPromotionProgram = useQuery(
  //   'promotionProgram',
  //   bannerApi({ type: 'banner-promotion' }),
  //   {
  //     enabled: shouldFetch,
  //     onSuccess: (data) => {
  //       if (data) {
  //         localStorage.setItem(
  //           'Homepage_promotionProgram',
  //           JSON.stringify(data)
  //         );
  //         setData(data);
  //       }
  //     },
  //   }
  // );

  const promotionProgram = data;

  // if (getPromotionProgram?.isLoading && !data) {
  //   return <BannerPromoSkeleton />;
  // }
  if (!data) {
    return <BannerPromoSkeleton />;
  }

  return (
    <div className='px-4 sm:px-0'>
      <div className='flex justify-between items-center mb-4 '>
        <h1 className='font-semibold text-[14px] sm:text-h-lg'>
          {' '}
          <Link href='/shop/promo' className='!text-black font-semibold'>
            Promo Tersedia
          </Link>
        </h1>
        {isDesktop && (
          <Link href='/shop/promo' className='!text-red-500 font-semibold'>
            Lihat Semua
          </Link>
        )}
        {isMobile && (
          <Link
            href='/shop/promo'
            className='!text-red-500 font-semibold sm:text-h-sm'
          >
            Lihat Semua
          </Link>
        )}
      </div>
      {isDesktop && promotionProgram && promotionProgram?.length > 0 && (
        <div className='grid grid-cols-3 sm:grid-cols-3 gap-4   rounded-md'>
          {promotionProgram?.map((banner) => (
            <Link key={banner.id} href={banner.url}>
              <Image
                width={439}
                height={150}
                quality={85}
                src={banner.image}
                alt={banner.name}
                className='h-auto  w-full rounded hover:scale-105 transition duration-500 ease-in-out'
              />
            </Link>
          ))}
        </div>
      )}

      {isMobile && (
        <Swiper slidesPerView={1.1} spaceBetween={8} freeMode>
          {promotionProgram?.map((banner) => (
            <SwiperSlide key={banner.id}>
              <Link key={banner.id} href={banner.url}>
                <Image
                  width={439}
                  height={150}
                  quality={85}
                  src={banner.image}
                  alt={banner.name}
                  className='h-auto  w-full rounded '
                />
              </Link>
            </SwiperSlide>
          ))}
        </Swiper>
      )}
    </div>
  );
};

export default BannerSection;