import { useFieldArray, useFormContext } from 'react-hook-form';

import { IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

import ConditionRow from './ConditionRow';

type RuleConditionsProps = {
  ruleIndex: number;
};

const RuleConditions = ({ ruleIndex }: RuleConditionsProps) => {
  const { t } = useLokaliseTranslation('time_tracker');
  const { control } = useFormContext();
  const { fields, append, remove, update } = useFieldArray({
    control,
    name: `rules.${ruleIndex}.conditions`,
  });

  const emptyCondition = {
    field: null,
    operator: null,
    valueType: null,
    value: null,
  };

  const addCondition = () => {
    append(emptyCondition);
  };

  const handleRemove = (index: number) => {
    // If there is only one condition, replace it with the empty condition
    if (fields.length === 1) {
      update(0, emptyCondition);
    } else {
      remove(index);
    }
  };

  return (
    <Stack
      sx={{
        gap: 2,
        backgroundColor: theme => theme.palette.new.background.layout.default,
        borderRadius: 2,
        p: 1.5,
        mt: 1,
        width: '100%',
      }}
    >
      {fields.map((field, index) => (
        <ConditionRow
          key={field.id}
          ruleIndex={ruleIndex}
          conditionIndex={index}
          onRemove={handleRemove}
        />
      ))}
      <Button
        variant="tertiary"
        size="large"
        startIcon={<IconPlus size={16} />}
        onClick={addCondition}
      >
        {t('categorized_hours.new_condition')}
      </Button>
    </Stack>
  );
};

export default RuleConditions;