import { Dispatch, SetStateAction } from 'react'

import {
  Listbox,
  ListboxButton,
  ListboxOption,
  ListboxOptions,
  Field,
} from '@headlessui/react'
import clsx from 'clsx'

const ListBox = <
  T extends {
    id: number
    name?: string
  }
>({
  items,
  selectedItem,
  setSelectedItem,
  onChange,
}: {
  items: T[]
  selectedItem: T
  setSelectedItem: Dispatch<SetStateAction<T>>
  onChange?: (selectedItem: T) => void
}): JSX.Element => {
  function updateSelection(newSelectedItem: T) {
    setSelectedItem(newSelectedItem)
    onChange?.(newSelectedItem)
  }

  return (
    <Field>
      <Listbox value={selectedItem} by="name" onChange={updateSelection}>
        <ListboxButton>{selectedItem.name}</ListboxButton>
        <ListboxOptions className="dark:bg-grayscale-muted dark:text-grayscale-light absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-xl bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
          {items.map((item) => (
            <ListboxOption
              key={item.id}
              className={({ focus }) =>
                clsx(
                  focus ? 'bg-primary-grapefruit-200 text-white' : '',
                  'relative cursor-default select-none py-2 pl-3 pr-9'
                )
              }
              value={item}
            >
              {({ focus, selected }) => (
                <>
                  <span
                    className={clsx(
                      selected ? 'font-semibold' : 'font-normal',
                      'block truncate'
                    )}
                  >
                    {item.name}
                  </span>

                  {selected ? (
                    <span
                      className={clsx(
                        focus ? 'text-white' : 'text-primary-grapefruit-200',
                        'absolute inset-y-0 right-0 flex items-center pr-4'
                      )}
                    ></span>
                  ) : null}
                </>
              )}
            </ListboxOption>
          ))}
        </ListboxOptions>
      </Listbox>
    </Field>
  )
}

export default ListBox