import { FC } from 'react';

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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import HuTitle from '@material-hu/components/design-system/Title';

import { type BalanceReport, UnitVacations } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { eventOperationsOptions } from 'src/utils/vacations';

export type AdjustBalanceTypeInputProps = {
  namesInput: string[];
  reportItem: BalanceReport;
};

export const AdjustBalanceTypeInput = (props: AdjustBalanceTypeInputProps) => {
  const { namesInput, reportItem } = props;

  const { t } = useLokaliseTranslation(['time_off', 'forms']);
  const options = eventOperationsOptions(t);

  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <HuTitle
        variant="S"
        title={t('adjustment_type')}
      />
      <Stack
        sx={{
          flexDirection: 'row',
          gap: 1,
          maxHeight: 90,
        }}
      >
        <HuFormInputSelect
          name={namesInput[0]}
          inputProps={{
            options,
            placeholder: t('adjustment_type'),
          }}
          rules={{
            required: t('general:required_field'),
          }}
        />
        <HuFormInputClassic
          name={namesInput[1]}
          inputProps={{
            hasCounter: false,
            placeholder:
              reportItem.policy.policyType.unit === UnitVacations.HOURS
                ? t('unit_hours')
                : t('days'),
            maxLength: 6,
            type: 'number',
          }}
          rules={{
            validate: value => {
              if (Number(value) > 0) {
                return true;
              }
              return t('forms:min_number', { value: 0 });
            },
            required: t('general:required_field'),
          }}
        />
      </Stack>
    </CardContainer>
  );
};

export default AdjustBalanceTypeInput;
