import { Listbox, Transition } from '@headlessui/react';
import { 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='wmx-relative'>
        <Listbox.Button
          className={cn(
            'wmx-relative wmx-w-44 wmx-text-sm wmx-border wmx-border-gray-300 wmx-cursor-default wmx-rounded-md wmx-bg-white wmx-py-1.5 wmx-pl-2 wmx-pr-10 wmx-text-left focus:wmx-outline-none',
            inputClass,
          )}
        >
          <span className='wmx-block wmx-truncate'>{items[selected] || placeholder}</span>
          <span className='wmx-pointer-events-none wmx-absolute wmx-inset-y-0 wmx-right-0 wmx-flex wmx-items-center pr-2'>
            <ChevronUpDownIcon className='wmx-h-5 wmx-w-5 wmx-text-gray-400' aria-hidden='true' />
          </span>
        </Listbox.Button>
        <Transition
          as={Fragment}
          leave='wmx-transition wmx-ease-in wmx-duration-100'
          leaveFrom='wmx-opacity-100'
          leaveTo='wmx-opacity-0'
        >
          <Listbox.Options className='wmx-absolute wmx-border wmx-z-50 wmx-mt-1 wmx-w-full wmx-overflow-hidden wmx-rounded-md wmx-bg-white wmx-shadow-lg wmx-outline-none'>
            {Object.keys(items).map((action, index) => (
              <Listbox.Option
                key={index}
                className={({ active, selected }) =>
                  cn(
                    `wmx-text-gray-900 !wmx-m-0 wmx-cursor-default wmx-outline-none wmx-select-none wmx-text-sm wmx-p-1 wmx-px-2`,
                    {
                      'wmx-bg-primary/15': active,
                      'wmx-font-bold': selected,
                    },
                  )
                }
                value={action}
              >
                <span className={`wmx-block wmx-truncate wmx-text-sm`}>{items[action]}</span>
              </Listbox.Option>
            ))}
          </Listbox.Options>
        </Transition>
      </div>
    </Listbox>
  );
};

export default SingleSelect;
