import React, { useEffect, useState } from 'react';
import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
import { Swiper, SwiperSlide } from 'swiper/react';
import useDevice from '@/core/hooks/useDevice';
import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
import usePromoStore from './promoStore'; // Sesuaikan dengan path yang sesuai
import { ChevronRightIcon } from '@heroicons/react/24/outline';

const PromoList = ({ selectedPromo }) => {
  const {
    title,
    slug,
    promoItems,
    promoData,
    isLoading,
    setTitle,
    setSlug,
    setPromoItems,
    setPromoData,
    setIsLoading,
  } = usePromoStore();

  const { isMobile } = useDevice();

  useEffect(() => {
    if (selectedPromo === 'Bundling') {
      setTitle('Kombinasi Kilat Pilihan Kami!');
      setSlug('bundling');
    } else if (selectedPromo === 'Loading') {
      setTitle('Belanja Borong Pilihan Kami!');
      setSlug('discount_loading');
    } else if (selectedPromo === 'Merchandise') {
      setTitle('Gratis Merchandise Spesial Indoteknik');
      setSlug('merchandise');
    }
  }, [selectedPromo, setTitle, setSlug]);

  useEffect(() => {
    const fetchPromotions = async () => {
      setIsLoading(true);
      try {
        const items = await fetchPromoItemsSolr(`type_value_s:${slug}`, 0, 10); 
        setPromoItems(items);

        const promoDataPromises = items.map(async (item) => {
          try {
            const response = await fetchPromoItemsSolr(`id:${item.id}`, 0, 10);
            return response;
          } catch (fetchError) {
            return [];
          }
        });

        const promoDataArray = await Promise.all(promoDataPromises);
        const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
        setPromoData(mergedPromoData);

      } catch (error) {
        console.error('Error fetching promo items:', error);
      } finally {
        setIsLoading(false);
      }
    };

    if (slug) {
      setIsLoading(true);
      setPromoItems([]);
      setPromoData([]);
      fetchPromotions();
    }
  }, [slug, setPromoItems, setPromoData, setIsLoading]);

 

  const navigateToPromoPage = () => {
    // Fungsi untuk menavigasikan pengguna ke halaman promo yang sesuai dengan slug
    window.location.href = '/shop/promo/' + slug;
  };

  return (
    <div className='h-[420px]'>
      <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1>
      {isLoading ? (
        <div className="loading-spinner flex justify-center">
          <LogoSpinner width={48} height={48} />
        </div>
      ) : (
        <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode >
            {promoData?.map((promotion) => (
            <SwiperSlide key={promotion.id}>
              <div className="min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]">
                <ProductPromoCard promotion={promotion} />
              </div>
            </SwiperSlide>
          ))}
         <SwiperSlide>
              <div className='rounded-lg flex items-center justify-center flex-col cursor-pointer  h-96 text-red-500 font-bold border-2 min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]' onClick={navigateToPromoPage}>
                <ChevronRightIcon className="w-48 h-48 ml-2 font-normal text-red-500 hover:text-red-400 transition duration-300 transform hover:scale-125" />
                <span className=''>
                  Lihat lebih banyak
                </span>

                {/* <button className="mt-4 text-black font-bold py-2 px-4 rounded min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]" onClick={navigateToPromoPage}>
                </button> */}
              </div>
            </SwiperSlide> 
          
        </Swiper>
      )}
    </div>
  );
};

export default PromoList;
// border-radius: 0.5rem;
//     border-width: 1px;
//     --tw-border-opacity: 1;
//     border-color: rgb(219 219 219 / var(--tw-border-opacity));