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

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

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

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

import {
  HourCategorizationFields,
  HourCategorizationOperators,
} from '../../types';

import ConditionValue from './ConditionValue';
import FormDropdown from './FormDropdown';

type ConditionRowProps = {
  ruleIndex: number;
  conditionIndex: number;
  onRemove: (index: number) => void;
};

const ROW_WIDTH = 'calc((100% - 132px) / 3)';

const ConditionRow = ({
  ruleIndex,
  conditionIndex,
  onRemove,
}: ConditionRowProps) => {
  const { t } = useLokaliseTranslation(['time_tracker']);
  const { watch, setValue } = useFormContext();
  const fieldName = `rules.${ruleIndex}.conditions.${conditionIndex}.field`;
  const operatorName = `rules.${ruleIndex}.conditions.${conditionIndex}.operator`;
  const valueTypeName = `rules.${ruleIndex}.conditions.${conditionIndex}.valueType`;
  const valueName = `rules.${ruleIndex}.conditions.${conditionIndex}.value`;
  const selectedField = watch(fieldName);
  const selectedOperator = watch(operatorName);

  const getOperatorOptions = (field: HourCategorizationFields) => {
    if (field === HourCategorizationFields.TIME_RANGE) {
      return [
        {
          label: t('time_tracker:categorized_hours.equals'),
          value: HourCategorizationOperators.EQUALS,
        },
      ];
    }
    if (field === HourCategorizationFields.WORKED_HOURS) {
      return [
        {
          label: t('time_tracker:categorized_hours.greater_than'),
          value: HourCategorizationOperators.GREATER_THAN,
        },
        {
          label: t('time_tracker:categorized_hours.less_than'),
          value: HourCategorizationOperators.LESS_THAN,
        },
        {
          label: t('time_tracker:categorized_hours.equals'),
          value: HourCategorizationOperators.EQUALS,
        },
      ];
    }
    return [];
  };

  return (
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 2,
        width: '100%',
      }}
    >
      <Typography
        variant="globalXS"
        sx={{
          color: theme => theme.palette.new.text.neutral.brand,
          fontWeight: 'fontWeightSemiBold',
          minWidth: '48px',
          textAlign: 'center',
          flexShrink: 0,
        }}
      >
        {conditionIndex === 0
          ? t('general:when')
          : t('general:and').toUpperCase()}
      </Typography>
      <FormDropdown
        name={fieldName}
        required
        options={Object.values(HourCategorizationFields).map(value => ({
          label:
            value === HourCategorizationFields.TIME_RANGE
              ? t('time_tracker:categorized_hours.range_hour')
              : t('time_tracker:worked_hours'),
          value,
        }))}
        onOptionSelect={() => {
          // Reset dependent fields when field changes
          setValue(operatorName, null, { shouldDirty: true });
          setValue(valueTypeName, null, { shouldDirty: true });
          setValue(valueName, null, { shouldDirty: true });
        }}
        placeholder={t('time_tracker:categorized_hours.field')}
        sx={
          conditionIndex === 0
            ? { flex: '1 1 0', minWidth: 0 }
            : { flex: `0 0 ${ROW_WIDTH}`, minWidth: 0 }
        }
      />
      <FormDropdown
        name={operatorName}
        required
        options={getOperatorOptions(selectedField)}
        placeholder={t('time_tracker:categorized_hours.operator')}
        disabled={!selectedField}
        onOptionSelect={() => {
          // Reset dependent fields when operator changes
          setValue(valueTypeName, null, { shouldDirty: true });
          setValue(valueName, null, { shouldDirty: true });
        }}
        sx={
          conditionIndex === 0
            ? { flex: '1 1 0', minWidth: 0 }
            : { flex: `0 0 ${ROW_WIDTH}`, minWidth: 0 }
        }
      />
      <ConditionValue
        ruleIndex={ruleIndex}
        conditionIndex={conditionIndex}
        field={selectedField}
        operator={selectedOperator}
        sx={{ flex: '1 1 0', minWidth: 0 }}
      />
      <IconButton
        variant="tertiary"
        onClick={() => {
          onRemove(conditionIndex);
        }}
        aria-label={t('general:delete')}
        size="small"
      >
        <IconX />
      </IconButton>
    </Stack>
  );
};

export default ConditionRow;