import Image from 'next/image';
import useCategoryHome from '../hooks/useCategoryHome';
import Link from '@/core/components/elements/Link/Link';
import { createSlug } from '@/core/utils/slug';
import { useEffect, useState } from 'react';
import { bannerApi } from '../../../api/bannerApi';
const { useQuery } = require('react-query');
import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
import useCategoryPilihan from '../hooks/useCategoryPilihan';
import useDevice from '@/core/hooks/useDevice';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const CategoryPilihan = ({ id, categories }) => {
  const { isDesktop, isMobile } = useDevice();
  const { categoryPilihan } = useCategoryPilihan();
  const heroBanner = useQuery(
    'categoryPilihan',
    bannerApi({ type: 'banner-category-list' })
  );
  return (
    categoryPilihan.length > 0 && (
      <section>
        {isDesktop && (
          <div>
            <div className='flex flex-row items-center mb-4'>
              <div className='font-semibold sm:text-h-lg mr-2'>
                LOB Kategori Pilihan
              </div>
              <p className='text-gray_r-10 text-sm'>
                200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!
              </p>
            </div>
            {heroBanner.data && heroBanner.data?.length > 0 && (
              <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'>
                <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
                  <Image
                    width={1260}
                    height={170}
                    quality={85}
                    src={heroBanner.data[0].image}
                    alt={heroBanner.data[0].name}
                    className='h-full object-cover w-full'
                  />
                </Link>
              </div>
            )}
            <div className='group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 '>
              {categoryPilihan?.data?.map((category) => (
                <div
                  key={category.id}
                  className='KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group'
                >
                  <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                    <div className='group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible'>
                      <div className=' h-36 flex justify-end items-end'>
                        <Image
                          className='group-hover:scale-105 transition-transform duration-300 '
                          src={
                            category?.image
                              ? category?.image
                              : '/images/noimage.jpeg'
                          }
                          width={120}
                          height={120}
                          alt={category?.name}
                        />
                      </div>
                      <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center'>
                        {category?.industries}
                      </h2>
                    </div>
                  </div>
                  <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
                    <Link
                      href={createSlug(
                        '/shop/lob/',
                        category?.industries,
                        category?.id
                      )}
                      className='category-mega-box__parent text-white   rounded-lg'
                    >
                      Lihat semua
                    </Link>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
        {isMobile && (
          <div className='p-4'>
            <div className='flex flex-row items-center mb-4'>
              <div className='font-semibold sm:text-h-md mr-2'>
                LOB Kategori Pilihan
              </div>
              {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
            </div>
            <div className='flex'>
              {heroBanner.data && heroBanner.data?.length > 0 && (
                <div className=' object-fill '>
                  <Link
                    key={heroBanner.data[0].id}
                    href={heroBanner.data[0].url}
                  >
                    <Image
                      width={439}
                      height={150}
                      quality={85}
                      src={heroBanner.data[0].image}
                      alt={heroBanner.data[0].name}
                      className='object-cover'
                    />
                  </Link>
                </div>
              )}
            </div>
            <Swiper slidesPerView={2.1} spaceBetween={10}>
              {categoryPilihan?.data?.map((category) => (
                <SwiperSlide key={category.id}>
                  <div
                    key={category.id}
                    className='KartuInti mt-2 h-48 w-48 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group'
                  >
                    <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
                      <div className='group/edit flex items-center justify-end h-48 w-48  flex-col group-hover/item:visible'>
                        <div className=' h-36 flex justify-end items-end'>
                          <Image
                            className='group-hover:scale-105 transition-transform duration-300 '
                            src={
                              category?.image
                                ? category?.image
                                : '/images/noimage.jpeg'
                            }
                            width={120}
                            height={120}
                            alt={category?.name}
                          />
                        </div>
                        <h2 className='text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center'>
                          {category?.industries}
                        </h2>
                      </div>
                    </div>
                    <div className='KartuA relative inset-0  flex h-36 w-48   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
                      <Link
                        href={createSlug(
                          '/shop/lob/',
                          category?.industries,
                          category?.id
                        )}
                        className='category-mega-box__parent text-white   rounded-lg'
                      >
                        Lihat semua
                      </Link>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        )}
      </section>
    )
  );
};

export default CategoryPilihan;