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'

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

  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'
            >
              {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'>
                <div className='flex flex-col'>
                  <div className='grid grid-cols-2 max-h-full w-full gap-2'>
                    {category.childs.map((brand, index) => (
                      (index < 8 ) && (
                        <div key={brand.id} className='w-full flex items-center justify-center pb-2'>
                          <Link
                            href={createSlug('/shop/category/', brand.name, brand.id)}
                            className='category-mega-box__child-one w-fit h-full flex items-center justify-center '
                          >
                            <Image src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/661' alt='' width={104} height={44} objectFit='cover' />
                          </Link>
                        </div>
                      )
                    ))}
                  </div>
                  {category.childs.length > 8 && (
                    <div className='flex hover:bg-gray_r-8/35 rounded-10'>
                      <Link
                        href={createSlug('/shop/category/', category.name, category.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 Brand</p>
                        <ChevronRightIcon className='w-4 text-danger-500 font-bold' />
                      </Link>
                    </div>
                  )}
                </div>
                <div className='flex w-60 h-20 object-cover'>
                  <Image src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/397' alt='' width={275} height={4} />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </DesktopView>
  )
}

export default Category