import {
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
  Transition,
} from "@headlessui/react";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
import { Fragment } from "react";
import cn from "../utils/cn";

const SingleSelect = ({
  placeholder,
  items,
  selected,
  onChange,
  inputClass,
}) => {
  return (
    <Listbox onChange={onChange} value={selected}>
      <div className="ino:relative">
        <ListboxButton
          className={cn(
            "ino:relative ino:block ino:h-9 ino:w-44 ino:cursor-pointer ino:rounded-md ino:border ino:border-border ino:bg-card ino:pr-9 ino:pl-2.5 ino:text-left ino:text-sm ino:shadow-xs ino:transition-colors ino:hover:border-primary/40 ino:focus:outline-none ino:focus-visible:ring-2 ino:focus-visible:ring-ring/50 ino:data-open:border-primary",
            inputClass,
          )}
        >
          <span className="ino:block ino:text-foreground ino:truncate">
            {items[selected] || placeholder}
          </span>
          <span className="ino:pointer-events-none ino:absolute ino:inset-y-0 ino:right-0 ino:flex ino:items-center ino:pr-2">
            <ChevronUpDownIcon
              className="ino:size-4 ino:text-muted-foreground"
              aria-hidden="true"
            />
          </span>
        </ListboxButton>
        <Transition
          as={Fragment}
          leave="ino:transition ino:ease-in ino:duration-100"
          leaveFrom="ino:opacity-100"
          leaveTo="ino:opacity-0"
        >
          <ListboxOptions className="ino:custom-scrollbar ino:absolute ino:z-50 ino:mt-1.5 ino:max-h-60 ino:w-full ino:overflow-y-auto ino:rounded-lg ino:border ino:border-border ino:bg-popover ino:p-1 ino:shadow-lg ino:outline-none">
            {Object.keys(items).map((action, index) => (
              <ListboxOption
                key={index}
                className={({ focus, selected }) =>
                  cn(
                    "ino:m-0! ino:flex ino:cursor-pointer ino:items-center ino:justify-between ino:gap-2 ino:rounded-md ino:px-2 ino:py-1.5 ino:text-sm ino:text-foreground ino:outline-none ino:select-none",
                    {
                      "ino:bg-muted": focus,
                      "ino:font-medium ino:text-primary": selected,
                    },
                  )
                }
                value={action}
              >
                {({ selected }) => (
                  <>
                    <span className="ino:block ino:truncate">
                      {items[action]}
                    </span>
                    {selected && (
                      <CheckIcon className="ino:size-4 ino:shrink-0 ino:text-primary" />
                    )}
                  </>
                )}
              </ListboxOption>
            ))}
          </ListboxOptions>
        </Transition>
      </div>
    </Listbox>
  );
};

export default SingleSelect;