import { Button, Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
import { Link, useFetcher } from 'react-router'

import { ChevronIcon } from '~/components/icons/chevron'
import { NotificationIcon } from '~/components/icons/notification'
import { APP } from '~/configs/meta'
import { useAdminContext } from '~/contexts/admin'

export const Navbar = () => {
  const { adminProfile } = useAdminContext()
  const fetcher = useFetcher()

  return (
    <div className="flex h-20 items-center justify-between border-b border-[#ECECEC] bg-white px-10 py-5">
      <Link
        to="/"
        className="h-full"
      >
        <img
          src={APP.logo}
          alt={APP.title}
          className="h-3/4 w-auto sm:h-full"
        />
      </Link>
      <div className="flex items-center gap-x-8">
        <Popover className="relative">
          <PopoverButton className="flex w-3xs cursor-pointer items-center justify-between focus:outline-none">
            <div className="flex items-center">
              <div className="mr-3 h-8 w-8 rounded-full bg-[#C4C4C4]" />
              <span className="text-xs">{adminProfile.name}</span>
            </div>
            <ChevronIcon className="opacity-50" />
          </PopoverButton>
          <PopoverPanel
            anchor={{ to: 'bottom', gap: '8px' }}
            transition
            className="flex w-3xs flex-col rounded-xl border border-[#ECECEC] bg-white p-3 transition duration-200 ease-in-out data-[closed]:-translate-y-1 data-[closed]:opacity-0"
          >
            <fetcher.Form
              method="POST"
              action="/actions/admin/logout"
              className="grid"
            >
              <Button
                type="submit"
                className="cursor-pointer rounded p-1 hover:bg-[#707FDD]/10 hover:text-[#5363AB]"
              >
                Logout
              </Button>
            </fetcher.Form>
          </PopoverPanel>
        </Popover>
        <NotificationIcon
          className="text-[#B0C3CC]"
          showBadge={true}
        />
      </div>
    </div>
  )
}