import { Listbox, Transition } from '@headlessui/react';
import { ChevronUpDownIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { __ } from '@wordpress/i18n';
import { Fragment, useEffect, useState } from 'react';

const MultiSelect = ({ placeholder = __('Select', 'disco'), items, selected = [], onChange = () => {} }) => {
  const [selectValue, setSelectedValue] = useState(selected);

  const handleChange = (selected) => {
    setSelectedValue(selected);
  };

  const handleRemoveItem = (value) => {
    setSelectedValue((prevState) => prevState.filter((item) => item !== value));
  };

  useEffect(() => {
    onChange(selectValue);
  }, [selectValue]);

  return (
    <Listbox value={selected} onChange={handleChange} multiple>
      <div className='wmx-relative wmx-test'>
        <Listbox.Button className='wmx-relative wmx-cursor-pointer wmx-min-w-[200px] wmx-flex-grow wmx-w-full wmx-rounded-md wmx-border wmx-text-sm wmx-border-gray-300 wmx-p-1.5 wmx-pr-10 wmx-text-left focus:wmx-outline-none'>
          <span className='wmx-flex wmx-flex-wrap wmx-gap-1.5 wmx-truncate'>
            {selected.length > 0
              ? selected?.map((value) => (
                  <span
                    className='wmx-flex wmx-rounded-sm wmx-items-center wmx-text-xs wmx-bg-gray-300 wmx-pl-1 wmx-p-0.5'
                    key={value}
                  >
                    {items[value]}

                    <XMarkIcon
                      onClick={(e) => {
                        e.stopPropagation();
                        handleRemoveItem(value);
                      }}
                      className='wmx-h-3 wmx-w-3'
                    />
                  </span>
                ))
              : placeholder}
          </span>
          <span className='wmx-pointer-events-none wmx-absolute wmx-inset-y-0 wmx-right-0 wmx-flex wmx-items-center wmx-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-z-10 wmx-absolute wmx-cursor-pointer wmx-mt-1.5 wmx-max-h-60 wmx-w-full wmx-overflow-auto wmx-rounded-md wmx-bg-white wmx-text-base wmx-shadow-lg wmx-ring-1 wmx-ring-black wmx-ring-opacity-5 focus:wmx-outline-none sm:wmx-text-sm'>
            {items &&
              Object.keys(items).map((item) => (
                <Listbox.Option
                  key={item}
                  className={({ active }) =>
                    `wmx-relative wmx-py-1 wmx-pl-4 wmx-mb-0 ${active ? 'wmx-bg-grey' : 'wmx-text-gray-900'}`
                  }
                  value={item}
                >
                  {({ selected }) => (
                    <>
                      <span
                        className={`wmx-block wmx-text-sm wmx-truncate ${
                          selected ? 'wmx-font-bold' : 'wmx-font-normal'
                        }`}
                      >
                        {items[item]}
                      </span>
                    </>
                  )}
                </Listbox.Option>
              ))}
          </Listbox.Options>
        </Transition>
      </div>
    </Listbox>
  );
};
export default MultiSelect;
