import React, { useEffect, useState, useCallback } from 'react';
import {
  fetchCategoryManagementSolr,
  fetchCategoryManagementVersion,
} from '../api/categoryManagementApi';
import NextImage from 'next/image';
import Link from 'next/link';
import { createSlug } from '@/core/utils/slug';
import { Skeleton } from '@chakra-ui/react';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { Pagination } from 'swiper';

const saveToLocalStorage = (key, data, version, expiryInHours) => {
  const now = new Date();
  const item = {
    value: data,
    version: version,
    expiry: now.getTime() + expiryInHours * 60 * 60 * 1000,
  };
  localStorage.setItem(key, JSON.stringify(item));
};

const getFromLocalStorage = (key) => {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) return null;

  const item = JSON.parse(itemStr);
  return item;
};

const isExpired = (expiry) => {
  const now = new Date();
  return now.getTime() > expiry;
};

const CategoryDynamic = () => {
  const [categoryManagement, setCategoryManagement] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const loadBrand = useCallback(async () => {
    const cachedData = getFromLocalStorage('categoryManagementData');

    // apakah data sudah kadaluarsa
    const dataExpired = cachedData ? isExpired(cachedData.expiry) : true;

    // Jika belum kadaluarsa, pakai data dari localStorage
    if (cachedData && !dataExpired) {
      setCategoryManagement(cachedData.value);
    } else {
      // Jika kadaluarsa, cek versi terbaru dari API
      const latestVersion = await fetchCategoryManagementVersion();

      if (cachedData && cachedData.version === latestVersion) {
        // Jika versinya sama, reset expiry
        saveToLocalStorage(
          'categoryManagementData',
          cachedData.value,
          latestVersion,
          24
        );
        setCategoryManagement(cachedData.value);
      } else {
        // Jika versinya beda, lakukan fetch data baru
        setIsLoading(true);
        const items = await fetchCategoryManagementSolr();
        setIsLoading(false);

        // Simpan data baru
        saveToLocalStorage('categoryManagementData', items, latestVersion, 24);
        setCategoryManagement(items);
      }
    }
  }, []);

  useEffect(() => {
    loadBrand(); // Load data saat komponen pertama kali dimuat
  }, [loadBrand]);

  const swiperBanner = {
    modules: [Pagination],
    classNames: 'mySwiper',
    slidesPerView: 3,
    spaceBetween: 10,
    pagination: {
      dynamicBullets: true,
      clickable: true,
    },
  };

  return (
    <div>
      {categoryManagement &&
        categoryManagement?.map((category) => {
          // const countLevel1 = categoryData[category.categoryIdI] || 0;
          return (
            <Skeleton key={category.id} isLoaded={!isLoading}>
              <div key={category.id}>
                <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'>
                  <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'>
                    {category.name}
                  </h1>
                  {/* <Skeleton isLoaded={countLevel1 != 0}>
                    <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p>
                  </Skeleton> */}
                  <Link
                    href={createSlug(
                      '/shop/category/',
                      category?.name,
                      category?.category_id
                    )}
                    className='!text-red-500 font-semibold'
                  >
                    Lihat Semua
                  </Link>
                </div>

                {/* Swiper for SubCategories */}
                <Swiper {...swiperBanner}>
                  {category.categories.map((subCategory) => {
                    // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0;

                    return (
                      <SwiperSlide key={subCategory.id}>
                        <div className='border rounded justify-start items-start '>
                          <div className='p-3'>
                            <div className='flex flex-row border rounded mb-2 justify-start items-center'>
                              <NextImage
                                src={
                                  subCategory.image
                                    ? subCategory.image
                                    : '/images/noimage.jpeg'
                                }
                                alt={subCategory.name}
                                width={90}
                                height={30}
                                className='object-fit p-4'
                              />
                              <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
                                <h2 className='font-semibold text-lg mr-2'>
                                  {subCategory?.name}
                                </h2>
                                {/* <Skeleton isLoaded={countLevel2 != 0}>
                                  <p className={`text-gray_r-10 text-sm`}>
                                    {countLevel2} Produk tersedia
                                  </p>
                                </Skeleton> */}
                                <Link
                                  href={createSlug(
                                    '/shop/category/',
                                    subCategory?.name,
                                    subCategory?.id_level_2
                                  )}
                                  className='!text-red-500 font-semibold'
                                >
                                  Lihat Semua
                                </Link>
                              </div>
                            </div>
                            <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'>
                              {subCategory.child_frontend_id_i.map(
                                (childCategory) => (
                                  <div key={childCategory.id} className=''>
                                    <Link
                                      href={createSlug(
                                        '/shop/category/',
                                        childCategory?.name,
                                        childCategory?.id_level_3
                                      )}
                                      className='flex flex-row gap-2 border rounded group hover:border-red-500'
                                    >
                                      <NextImage
                                        src={
                                          childCategory.image
                                            ? childCategory.image
                                            : '/images/noimage.jpeg'
                                        }
                                        alt={childCategory.name}
                                        className='p-2 ml-1'
                                        width={40}
                                        height={40}
                                      />
                                      <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'>
                                        <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>
                                          {childCategory.name}
                                        </h3>
                                      </div>
                                    </Link>
                                  </div>
                                )
                              )}
                            </div>
                          </div>
                        </div>
                      </SwiperSlide>
                    );
                  })}
                </Swiper>
              </div>
            </Skeleton>
          );
        })}
    </div>
  );
};

export default CategoryDynamic;