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

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

import Typography from '@material-hu/mui/Typography/Typography';

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

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

import { HourCategorizationLogicOperators } from '../../types';

import RuleConditions from './RuleConditions';

const RuleCreation = ({ isEdit = false }: { isEdit?: boolean }) => {
  const { t } = useLokaliseTranslation('time_tracker');
  const { control } = useFormContext();

  const {
    fields: rulesFields,
    append: appendRule,
    remove: removeRule,
  } = useFieldArray({
    control,
    name: 'rules',
  });

  const addRule = () => {
    appendRule({
      operator: HourCategorizationLogicOperators.AND,
      conditions: [
        {
          field: null,
          operator: null,
          valueType: null,
          value: null,
        },
      ],
    });
  };

  return (
    <Stack>
      {!isEdit && (
        <Stack sx={{ mb: 3 }}>
          <Typography
            variant="globalL"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('time_tracker:categorized_hours.rule_creation_title')}
          </Typography>
          <Typography
            variant="globalS"
            sx={{ color: theme => theme.palette.new.text.neutral.lighter }}
          >
            {t('time_tracker:categorized_hours.rule_creation_subtitle')}
          </Typography>
        </Stack>
      )}
      {rulesFields.map((rule, ruleIndex) => (
        <CardContainer
          key={rule.id}
          fullWidth
          sx={{ mb: 3 }}
        >
          <Accordion
            title={t('time_tracker:categorized_hours.rule_title')}
            description={t('time_tracker:categorized_hours.rule_description')}
            avatar={{
              text: String(ruleIndex + 1).padStart(2, '0'),
            }}
            defaultExpanded={true}
            sx={{
              boxShadow: 'none',
            }}
            hasPadding={false}
            action={{
              children: <IconTrash size={16} />,
              onClick: () => removeRule(ruleIndex),
              'aria-label': t('general:delete'),
              size: 'medium',
            }}
            customDetail={<RuleConditions ruleIndex={ruleIndex} />}
          />
        </CardContainer>
      ))}
      <Button
        variant="secondary"
        size="large"
        startIcon={<IconPlus size={16} />}
        onClick={addRule}
      >
        {t('time_tracker:categorized_hours.new_rule')}
      </Button>
    </Stack>
  );
};

export default RuleCreation;