import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline';
import { __ } from '@wordpress/i18n';
import { useDispatch } from 'react-redux';

import AsyncMultiSelect from '../../../../../../components/AsyncMultiSelect';
import Input from '../../../../../../components/Input';
import MultiSelect from '../../../../../../components/MultiSelect';
import SingleSelect from '../../../../../../components/SingleSelect';
import { updateConditionValues } from '../../../../../../features/filters/filtersSlice';
import { useGetSearchDataQuery } from '../../../../../../features/search/searchApi';
import { getSelectedFilterData } from '../../../../../../utils/utils';

const Condition = ({ allFilters, condition, conditionGroup }) => {
  const filterData = getSelectedFilterData(allFilters, condition.compare_with);
  const selectedCondition = condition?.condition;
  const selectedCompare = condition?.compare;
  const dispatch = useDispatch();

  const handleConditionSelectValueChange = (active) => {
    if (active === 'between' || active === 'date_between') {
      dispatch(
        updateConditionValues({
          values: {
            ...condition,
            condition: active,
            compare: ['', ''],
          },
          group_id: conditionGroup.id,
        }),
      );
    } else {
      dispatch(
        updateConditionValues({
          values: { ...condition, condition: active },
          group_id: conditionGroup.id,
        }),
      );
    }
  };

  const handleCompareValueChange = (active) => {
    dispatch(
      updateConditionValues({
        values: { ...condition, compare: active },
        group_id: conditionGroup.id,
      }),
    );
  };

  const handleBetweenValueChange = (e, index) => {
    const compare = [...condition.compare];
    compare[index] = e.target.value;

    dispatch(
      updateConditionValues({
        values: { ...condition, compare },
        group_id: conditionGroup.id,
      }),
    );
  };

  const handleMultiCompareValueChange = (active) => {
    dispatch(
      updateConditionValues({
        values: { ...condition, compare: active },
        group_id: conditionGroup.id,
      }),
    );
  };

  const handleValueChange = (e) => {
    dispatch(
      updateConditionValues({
        values: { ...condition, compare: e.target.value },
        group_id: conditionGroup.id,
      }),
    );
  };
  return (
    <div className='wmx-flex wmx-w-full wmx-gap-3'>
      {filterData.condition && (
        <div className='wmx-flex-shrink-0'>
          <SingleSelect
            inputClass='wmx-w-52'
            selected={selectedCondition}
            items={filterData.condition}
            onChange={handleConditionSelectValueChange}
          />
        </div>
      )}
      {filterData?.input_type && Object.prototype.hasOwnProperty.call(filterData?.input_type, 'type') ? (
        <>
          <>
            {filterData.input_type.option_type == 'manual' && (
              <>
                {filterData.input_type.multiple ? (
                  <div className='wmx-flex-grow'>
                    <MultiSelect
                      placeHolder={__('Select Value', 'wmx')}
                      selected={selectedCompare}
                      items={filterData.input_type.options}
                      onChange={handleMultiCompareValueChange}
                    />
                  </div>
                ) : (
                  <div className='wmx-flex-shrink-0 wmx-flex-grow'>
                    <SingleSelect
                      inputClass='wmx-w-full'
                      placeholder={__('Select Value', 'wmx')}
                      selected={selectedCompare || ''}
                      items={filterData.input_type.options}
                      onChange={handleCompareValueChange}
                    />
                  </div>
                )}
              </>
            )}
          </>
          <>
            {filterData.input_type.option_type == 'api' && (
              <div className='wmx-flex-grow'>
                <AsyncMultiSelect
                  widthClass='wmx-w-full'
                  placeHolder={__('Search ' + filterData.title.split(' ').slice(-1)[0], 'wmx')}
                  endpoint={filterData?.input_type?.endpoint}
                  selected={selectedCompare}
                  queryHook={useGetSearchDataQuery}
                  onChange={handleMultiCompareValueChange}
                />
              </div>
            )}
          </>
        </>
      ) : (
        <>
          {condition.compare_with && (
            <>
              {condition?.condition === 'between' || condition?.condition === 'date_between' ? (
                <div className='wmx-flex wmx-flex-grow wmx-items-center wmx-gap-3'>
                  <Input
                    className='wmx-flex-grow wmx-text-sm'
                    onChange={(e) => handleBetweenValueChange(e, 0)}
                    type={filterData.input_type}
                    value={condition?.compare?.[0]}
                    placeholder={__('From', 'wmx')}
                  />
                  <div>
                    <ArrowsRightLeftIcon className='wmx-h-5 wmx-flex-shrink-0 wmx-w-5' />
                  </div>
                  <Input
                    className='wmx-flex-grow wmx-text-sm'
                    onChange={(e) => handleBetweenValueChange(e, 1)}
                    type={filterData.input_type}
                    value={condition?.compare?.[1]}
                    placeholder={__('To', 'wmx')}
                  />
                </div>
              ) : (
                <Input
                  className='wmx-flex-grow wmx-text-sm'
                  onChange={handleValueChange}
                  type={filterData.input_type}
                  value={condition?.compare}
                  placeholder={__('Value', 'wmx')}
                />
              )}
            </>
          )}
        </>
      )}
    </div>
  );
};
export default Condition;
