import { PlusCircleIcon } from '@heroicons/react/24/solid';
import { __ } from '@wordpress/i18n';
import { useDispatch, useSelector } from 'react-redux';

import Button from '../../../../../components/Button';
import { addConditionGroup } from '../../../../../features/filters/filtersSlice';
import Conditions from './components/Conditions';

const ConditionsCard = ({ allFilters, isLoading }) => {
  const dispatch = useDispatch();

  const filter = useSelector((state) => state.filters);

  const handleAddConditionGroup = () => {
    dispatch(addConditionGroup());
  };

  return (
    <div>
      {filter.conditions.length > 0 && <Conditions allFilters={allFilters} isLoading={isLoading} />}

      <div className={`wmx-flex wmx-justify-center wmx-items-center wmx-gap-4 wmx-py-4`}>
        {!isLoading && (
          <Button
            className='!wmx-px-3 !wmx-py-1 wmx-rounded-lg'
            onClick={handleAddConditionGroup}
            icon={<PlusCircleIcon className='wmx-h-6 wmx-w-6 wmx-text-white' />}
          >
            {__('Add Condition Group', 'wmx')}
          </Button>
        )}
      </div>
    </div>
  );
};
export default ConditionsCard;
