import {
  ChevronDownIcon,
  XMarkIcon,
  MagnifyingGlassIcon,
} from '@heroicons/react/24/solid'
import {
  Popover,
  PopoverButton,
  PopoverPanel,
  PopoverBackdrop,
  Field,
  Select,
  Label,
  CloseButton,
} from '@headlessui/react'
import { Container } from './Container'

export function Menu({ recentCourses }) {
  return (
    <Popover className="relative">
      <PopoverButton className="text-black font-semibold cursor-pointer flex gap-1 hover:outline-2 rounded focus:outline-none">
        <div className="truncate max-w-36 sm:max-w-72 md:max-w-124">
          NR-18 PEMT Plataforma Móvel de Trabalho
        </div>
        <ChevronDownIcon className="w-5 fill-black" />
      </PopoverButton>

      <PopoverPanel
        // static={true}
        anchor="bottom"
        className="sticky z-20 -mt-11.5 w-full py-6 2xl:py-24 bg-lime-400 rounded-b-2xl drop-shadow-sm transition duration-150 ease-linear data-[closed]:opacity-0"
        transition
      >
        <Container className="text-black relative xl:w-10/12 2xl:w-5xl">
          <CloseButton
            className="absolute border border-black -top-3.5 2xl:-top-20 right-2.5 2xl:right-0 rounded-full p-px cursor-pointer"
            title="Fechar"
            aria-hidden={true}
          >
            <XMarkIcon className="size-3.5" />
          </CloseButton>

          <div className="border-b border-black pb-6 lg:pb-12 mb-6 lg:mb-12">
            <span>Curso de formação</span>
            <h1 className="text-xl lg:text-2xl">
              NR-18 PEMT Plataforma Elevatória Móvel de Trabalho
            </h1>
          </div>

          <div className="flex max-lg:flex-col gap-2.5 justify-between mb-3.5">
            <h6 className="font-medium text-xl lg:text-2xl">
              Conheça outros cursos da EDUSEG&reg;
            </h6>

            <div className="flex max-lg:flex-col gap-0.5 lg:gap-4">
              {/* Search */}
              <label className="flex gap-1 items-center">
                <span className="text-nowrap">Buscar por</span>
                <div className="flex border rounded px-1.5 py-0.5 lg:px-2 lg:py-1 bg-white/20 focus-within:bg-white w-full transition duration-150">
                  <input className="outline-none w-full" />
                  <MagnifyingGlassIcon className="w-5" />
                </div>
              </label>
              {/* Filter */}
              <Field className="flex gap-1 items-center">
                <Label className="text-nowrap">Exibir apenas</Label>
                <div className="relative w-full lg:w-30 bg-white/20">
                  <Select className="flex border items-center justify-between gap-0.5 border-black rounded px-1.5 py-0.5 lg:px-2 lg:py-1 appearance-none focus:outline-none w-full">
                    <option value="formacao">Formação</option>
                    <option value="reciclagem">Reciclagem</option>
                  </Select>
                  <ChevronDownIcon
                    className="absolute top-2.5 right-2.5 pointer-events-none size-4"
                    aria-hidden="true"
                  />
                </div>
              </Field>
            </div>
          </div>

          <ul className="list-disc list-inside font-medium *:*:hover:underline *:*:cursor-pointer max-lg:*:truncate">
            {recentCourses.map(({ data: { title, slug } }, idx) => {
              return (
                <li key={idx}>
                  <a href={`/${slug}`}>{title}</a>
                </li>
              )
            })}
          </ul>
        </Container>
      </PopoverPanel>
      <PopoverBackdrop className="fixed z-10 inset-0" />
    </Popover>
  )
}