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

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

  useEffect(() => {
    const fetchCategoryData = async () => {
      setIsLoading(true);
      const res = await fetch('/api/category-management');
      const { data } = await res.json();
      if (data) {
        setCategoryManagement(data);
      }
    };

    fetchCategoryData();
  }, []);

  useEffect(() => {
    if (categoryManagement?.length > 0) {
      setIsLoading(false);
    }
  }, [categoryManagement]);

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

  return (
    <div>
      {categoryManagement &&
        categoryManagement.map((category) => (
          <Skeleton key={category.id} isLoaded={!isLoading}>
            <LazyLoadComponent key={category.id}>
              <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 {...swiperBanner}>
                  {category?.categories?.map((subCategory) => (
                    <LazyLoadComponent key={subCategory.id}>
                      <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'
                                loading='eager'
                              />
                              <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) => (
                                  <LazyLoadComponent key={childCategory.id}>
                                    <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}
                                          placeholder='blur'
                                          blurDataURL='/icon.jpg'
                                          loading='eager'
                                        />
                                        <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>
                                  </LazyLoadComponent>
                                )
                              )}
                            </div>
                          </div>
                        </div>
                      </SwiperSlide>
                    </LazyLoadComponent>
                  ))}
                </Swiper>
              </div>
            </LazyLoadComponent>
          </Skeleton>
        ))}
    </div>
  );
};

export default CategoryDynamic;