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';

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);
      }
      setIsLoading(false);
    };

    fetchCategoryData();
  }, []);

  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}>
            <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) => (
                  <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;
