import Link from "../Link/Link"
import greeting from "@/core/utils/greeting"
import { Cog6ToothIcon } from "@heroicons/react/24/solid"
import useAuth from "@/core/hooks/useAuth"
import { AnimatePresence, motion } from "framer-motion"

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 href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link>
                      <Link 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"
                      >
                        <Cog6ToothIcon 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