import Link from '../Link/Link'
import greeting from '@/core/utils/greeting'
import useAuth from '@/core/hooks/useAuth'
import { AnimatePresence, motion } from 'framer-motion'
import { ChevronDownIcon, ChevronUpIcon, CogIcon } from '@heroicons/react/24/outline'
import { Fragment, useEffect, useState } from 'react'
import odooApi from '@/core/api/odooApi'

const Sidebar = ({ active, close }) => {
  const auth = useAuth()

  const SidebarLink = ({ children, ...props }) => (
    <Link
      {...props}
      onClick={close}
    >
      {children}
    </Link>
  )

  const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
  const transition = { ease: 'linear', duration: 0.1 }

  const [isOpenCategory, setOpenCategory] = useState(false)
  const [categories, setCategories] = useState([])

  useEffect(() => {
    const loadCategories = async () => {
      if (isOpenCategory && categories.length == 0) {
        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()
  }, [isOpenCategory, categories])

  const toggleCategories = (id = 0) => {
    let newCategories = categories.map((category) => {
      category.childs = category.childs.map((child1Category) => {
        return {
          ...child1Category,
          isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen
        }
      })
      return {
        ...category,
        isOpen: id == category.id ? !category.isOpen : category.isOpen
      }
    })
    setCategories(newCategories)
  }

  return (
    <>
      <AnimatePresence>
        {active && (
          <>
            <motion.div
              className='overlay z-50'
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={transition}
              onClick={close}
            />
            <motion.div
              className='fixed z-[55] top-0 h-full w-[80%] bg-white'
              initial={{ left: '-80%' }}
              animate={{ left: 0 }}
              exit={{ left: '-80%' }}
              transition={transition}
            >
              <div className='divide-y divide-gray_r-6'>
                <div className='p-4 flex gap-x-3'>
                  {!auth && (
                    <>
                      <Link
                        onClick={close}
                        href='/register'
                        className='btn-yellow !text-gray_r-12 py-2 flex-1'
                      >
                        Daftar
                      </Link>
                      <Link
                        onClick={close}
                        href='/login'
                        className='btn-solid-red !text-gray_r-1 py-2 flex-1'
                      >
                        Masuk
                      </Link>
                    </>
                  )}
                  {auth && (
                    <>
                      <div className='text-caption-2 text-gray_r-11'>
                        {greeting()},
                        <span className='text-body-2 text-gray_r-12 block mt-1 font-medium'>
                          {auth?.name}
                        </span>
                      </div>
                      <Link
                        onClick={close}
                        href='/my/menu'
                        className='!text-gray_r-11 ml-auto my-auto'
                      >
                        <CogIcon className='w-6' />
                      </Link>
                    </>
                  )}
                </div>
                <SidebarLink
                  className={itemClassName}
                  href='/shop/brands'
                >
                  Semua Brand
                </SidebarLink>
                <SidebarLink
                  className={itemClassName}
                  href='/about-us'
                >
                  Tentang Indoteknik
                </SidebarLink>
                <SidebarLink
                  className={itemClassName}
                  href='/faqs'
                >
                  F.A.Q
                </SidebarLink>
                <SidebarLink
                  className={itemClassName}
                  href='/contact-us'
                >
                  Hubungi Kami
                </SidebarLink>
                <button
                  className={`${itemClassName} w-full text-left flex`}
                  onClick={() => setOpenCategory(!isOpenCategory)}
                >
                  Kategori
                  <div className='ml-auto'>
                    {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />}
                    {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />}
                  </div>
                </button>
                {isOpenCategory &&
                  categories.map((category) => (
                    <Fragment key={category.id}>
                      <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'>
                        <Link
                          href={`/shop/search?category=${category.name}`}
                          className='flex-1 font-normal !text-gray_r-11 py-4'
                        >
                          {category.name}
                        </Link>
                        <div
                          className='ml-4 h-full py-4'
                          onClick={() => toggleCategories(category.id)}
                        >
                          {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />}
                          {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />}
                        </div>
                      </div>
                      {category.isOpen &&
                        category.childs.map((child1Category) => (
                          <Fragment key={child1Category.id}>
                            <div
                              className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${
                                category.isOpen ? 'bg-gray_r-2' : ''
                              }`}
                            >
                              <Link
                                href={`/shop/search?category=${child1Category.name}`}
                                className='flex-1 font-normal !text-gray_r-11'
                              >
                                {child1Category.name}
                              </Link>
                              {child1Category.childs.length > 0 && (
                                <div
                                  className='ml-4 h-full'
                                  onClick={() => toggleCategories(child1Category.id)}
                                >
                                  {!child1Category.isOpen && (
                                    <ChevronDownIcon className='text-gray_r-11 w-5' />
                                  )}
                                  {child1Category.isOpen && (
                                    <ChevronUpIcon className='text-gray_r-11 w-5' />
                                  )}
                                </div>
                              )}
                            </div>
                            {child1Category.isOpen &&
                              child1Category.childs.map((child2Category) => (
                                <Link
                                  key={child2Category.id}
                                  href={`/shop/search?category=${child2Category.name}`}
                                  className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16'
                                >
                                  {child2Category.name}
                                </Link>
                              ))}
                          </Fragment>
                        ))}
                    </Fragment>
                  ))}
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  )
}

export default Sidebar