import Link from '../Link/Link'
import greeting from '@/core/utils/greeting'
import useAuth from '@/core/hooks/useAuth'
import { AnimatePresence, motion } from 'framer-motion'
import { CogIcon } from '@heroicons/react/24/outline'

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.2 }

  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='/'>
                  Semua Brand
                </SidebarLink>
                <SidebarLink className={itemClassName} href='/'>
                  Tentang Indoteknik
                </SidebarLink>
                <SidebarLink className={itemClassName} href='/'>
                  Pusat Bantuan
                </SidebarLink>
                <button className={`${itemClassName} w-full text-left`}>Kategori</button>
              </div>
            </motion.div>
          </>
        )}
      </AnimatePresence>
    </>
  )
}

export default Sidebar