/* eslint-disable no-unused-vars */
import { Listbox, Transition } from '@headlessui/react';
import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
import { __ } from '@wordpress/i18n';
import { Fragment } from 'react';
import { useDispatch } from 'react-redux';
import { updateConditionValues } from '../../../../../../features/filters/filtersSlice';
import cn from '../../../../../../utils/cn';
import { getSelectedFilterData } from '../../../../../../utils/utils';

const SelectFilterDropdown = ({ allFilters, condition, conditionGroup }) => {
  const filterData = getSelectedFilterData(allFilters, condition?.compare_with);

  const dispatch = useDispatch();

  const handleFilterChange = (active) => {
    const filterData = getSelectedFilterData(allFilters, active);

    const { compare, ...rest } = condition;
    dispatch(
      updateConditionValues({
        values: {
          ...rest,
          compare_with: active,
          condition: filterData?.condition ? Object.keys(filterData.condition)[0] : '',
        },
        group_id: conditionGroup.id,
      }),
    );
  };

  return (
    <Listbox className='wmx-w-[260px] ' onChange={handleFilterChange}>
      <div className='wmx-relative'>
        <Listbox.Button className=' wmx-relative wmx-cursor-pointer wmx-w-full wmx-rounded-md wmx-border wmx-text-sm wmx-border-gray-300 wmx-py-1.5 wmx-pl-2 wmx-pr-10 wmx-text-left focus:wmx-outline-none'>
          <span className='wmx-block wmx-truncate wmx-filter-select'>
            {filterData?.title ? filterData?.title : __('Select Filter', 'wmx')}
          </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
            data-testid='filters-item'
            className='wmx-z-50 wmx-pt-2 wmx-absolute wmx-mt-1.5 wmx-max-h-72 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'
          >
            {allFilters.map((o, index) => {
              return (
                <Fragment key={index}>
                  <Listbox.Option disabled className='wmx-pl-4 wmx-font-bold wmx-mb-0' data-test-id={o.optionGroup}>
                    {o.optionGroup}
                  </Listbox.Option>
                  <>
                    {Object.keys(o.options).map((opt, index) => (
                      <Listbox.Option
                        key={index}
                        value={opt}
                        className={({ active, selected }) =>
                          cn('wmx-pl-7 wmx-bg-primary-light wmx-relative wmx-py-1 wmx-mb-0 wmx-cursor-pointer', {
                            'wmx-bg-primary/15': active,
                            'wmx-font-bold': selected,
                          })
                        }
                      >
                        {o.options[opt].title}
                      </Listbox.Option>
                    ))}
                  </>
                </Fragment>
              );
            })}
          </Listbox.Options>
        </Transition>
      </div>
    </Listbox>
  );
};
export default SelectFilterDropdown;
