import odooApi from '@/core/api/odooApi'
import Link from '@/core/components/elements/Link/Link'
import DesktopView from '@/core/components/views/DesktopView'
import { createSlug } from '@/core/utils/slug'
import { ChevronRightIcon } from '@heroicons/react/24/outline'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import PopularBrand from './PopularBrand'
import { bannerApi } from '@/api/bannerApi';
const { useQuery } = require('react-query')

const Category = () => {
  const [categories, setCategories] = useState([])
  const [openCategories, setOpenCategory] = useState([]);
  const [banner, setBanner] = useState([]);

  // const promotionProgram = useQuery('banner-promo-category-card', bannerApi({ type: 'banner-promo-category-card' }));
  
  useEffect(() => {
    const loadCategories = async () => {
      let dataCategories = await odooApi('GET', '/api/v1/category/tree')
      dataCategories = dataCategories?.map((category) => {
        category.childs = category.childs.map((child1Category) => {
          return {
            ...child1Category,
            isOpen: false
          }
        })
        return {
          ...category,
          isOpen: false
        }
      })
      setCategories(dataCategories)
    }
    loadCategories()
  }, [])
  return (
    <DesktopView>
      <div className='category-mega-box'>
        {categories?.map((category) => (
          <div key={category.id} className='flex'>
            <Link
              href={createSlug('/shop/category/', category.name, category.id)}
              className='category-mega-box__parent flex items-center'
            >
              <div className='mr-2  flex justify-center items-center'>
                <Image src={category.image} alt='' width={25} height={25} />
              </div>
              {category.name}
            </Link>
            <div className='category-mega-box__child-wrapper'>
              <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'>
                {category.childs.map((child1Category) => (
                  <div key={child1Category.id} className='w-full'>
                    <Link
                      href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
                      className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2'
                    >
                      {child1Category.name}
                    </Link>
                    <div className='flex flex-col gap-y-3 w-full'>
                      {child1Category.childs.map((child2Category, index) => (
                        (index < 4) && (
                          <Link
                            href={createSlug('/shop/category/', child2Category.name, child2Category.id)}
                            className='category-mega-box__child-two truncate'
                            key={child2Category.id}
                          >
                            {child2Category.name}
                          </Link>
                        )
                      ))}
                      {child1Category.childs.length > 5 && (
                        <div className='flex hover:bg-gray_r-8/35 rounded-10'>
                          <Link
                            href={createSlug('/shop/category/', child1Category.name, child1Category.id)}
                            className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4'
                          >
                            <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p>
                            <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
                          </Link>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
              {/* <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'>
              <PopularBrand category={category} />
              {Array.isArray(promotionProgram?.data) && promotionProgram?.data.length > 0 && promotionProgram?.data[0]?.map((banner, index) => (
                <div key={index} className='flex w-60 h-20 object-cover'>
                  <Image src={`${banner.image}`} alt={`${banner.name}`} width={275} height={4} />
                </div>
              ))}
              </div> */}
            </div>
          </div>
        ))}
      </div>
    </DesktopView>
  )
}

export default Category