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) => {
  const now = new Date();
  const item = {
    value: data,
    version: version,
    lastFetchedTime: now.getTime(),
  };
  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 getElapsedTime = (lastFetchedTime) => {
  const now = new Date();
  return now.getTime() - lastFetchedTime;
};

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

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

    if (cachedData) {
      // Hitung selisih waktu antara saat ini dengan waktu terakhir data di-fetch
      const elapsedTime = getElapsedTime(cachedData.lastFetchedTime);

      if (elapsedTime < 24 * 60 * 60 * 1000) {
        setCategoryManagement(cachedData.value);
        return;
      }
    }

    const latestVersion = await fetchCategoryManagementVersion();
    if (cachedData && cachedData.version === latestVersion) {
      // perbarui waktu
      saveToLocalStorage(
        'homepage_categoryDynamic',
        cachedData.value,
        latestVersion
      );
      setCategoryManagement(cachedData.value);
    } else {
      setIsLoading(true);
      const items = await fetchCategoryManagementSolr();
      setIsLoading(false);

      saveToLocalStorage('homepage_categoryDynamic', items, latestVersion);
      setCategoryManagement(items);
    }
  }, []);

  useEffect(() => {
    loadBrand();
  }, [loadBrand]);

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

  return (
    <div>
      {categoryManagement &&
        categoryManagement?.map((category) => {
          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>
                  <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) => {
                    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>
                                <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;