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

import { ChevronIcon } from '~/components/icons/chevron'
import { ProfileIcon } from '~/components/icons/profile'
import { APP } from '~/configs/meta'
import type { loader } from '~/routes/_admin.lg-admin'

export const Navbar = () => {
  const loaderData = useRouteLoaderData<typeof loader>('routes/_admin.lg-admin')
  const { staffData } = loaderData || {}
  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 rounded-xl p-2 ring-1 ring-[#707FDD]/10 hover:shadow focus:outline-none">
            <div className="flex items-center space-x-3">
              {staffData?.profile_picture ? (
                <img
                  src={staffData?.profile_picture}
                  alt={staffData?.name}
                  className="h-8 w-8 rounded-full bg-[#C4C4C4] object-cover"
                />
              ) : (
                <ProfileIcon className="h-8 w-8 rounded-full bg-[#C4C4C4]" />
              )}

              <span className="text-sm">{staffData?.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>
      </div>
    </div>
  )
}