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

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

import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { preventNonNumberInput } from 'src/utils/inputUtils';
import {
  validateMaxRule,
  validateMinRule,
  validateRequiredStringRule,
} from 'src/utils/validation';

import { type PolicyFormFields, policiesFields } from '../../form';

type Props = {
  hoursFieldName: string;
  minutesFieldName: string;
};

const INPUT_SX = {
  maxWidth: 208,
  width: '100%',
  '.CustomLabel-root': {
    textTransform: 'capitalize',
  },
};

const HourMinuteInputs = ({ hoursFieldName, minutesFieldName }: Props) => {
  const { t } = useLokaliseTranslation('time_tracker');
  const parentForm = useFormContext<PolicyFormFields>();
  const [autoCloseLimitHours, autoCloseOptionValueHours] = useWatch({
    control: parentForm.control,
    name: [
      policiesFields.automations.autoCloseLimitHours,
      policiesFields.automations.autoCloseOptionValueHours,
    ],
  });

  const equalValidLimitHours = Boolean(
    autoCloseLimitHours && autoCloseOptionValueHours,
  );

  return (
    <Stack sx={{ flexDirection: 'row', gap: 1 }}>
      <FormInputClassic
        name={hoursFieldName}
        inputProps={{
          label: t('general:hour_other'),
          hideErrorText: true,
          showClear: false,
          hasCounter: false,
          maxLength: 2,
          inputMode: 'numeric',
          type: 'number',
          onKeyDown: preventNonNumberInput,
          sx: INPUT_SX,
        }}
        rules={{
          validate: {
            hourRequired: validateRequiredStringRule,
            hourMin: validateMinRule(
              1,
              t('validations:min_number', { min: 1 }),
            ),
            hourMax: validateMaxRule(
              24,
              t('validations:max_number', { max: 24 }),
            ),
            autoCloseLimitConsistency: validateMaxRule(
              Number(autoCloseLimitHours),
              t('policies.hours_must_be_less_than_forgot_checkout_time'),
            ),
          },
        }}
      />
      <FormInputClassic
        name={minutesFieldName}
        inputProps={{
          label: t('general:minute_other'),
          hideErrorText: true,
          showClear: false,
          hasCounter: false,
          maxLength: 2,
          inputMode: 'numeric',
          type: 'number',
          onKeyDown: preventNonNumberInput,
          sx: INPUT_SX,
        }}
        rules={{
          validate: {
            minuteRequired: validateRequiredStringRule,
            minuteMin: validateMinRule(
              0,
              t('validations:min_number', { min: 0 }),
            ),
            minuteMax: validateMaxRule(
              59,
              t('validations:max_number', { max: 59 }),
            ),
            ...(equalValidLimitHours && {
              autoCloseLimitConsistency: validateMaxRule(
                Number(autoCloseLimitHours) > Number(autoCloseOptionValueHours)
                  ? 100
                  : 0,
                t('policies.hours_must_be_less_than_forgot_checkout_time'),
              ),
            }),
          },
        }}
      />
    </Stack>
  );
};

export default HourMinuteInputs;