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

import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateMinRule } from 'src/utils/validation';

import { NUMBER_INPUT_STYLES } from '../constants';

type AnyEnum = { [s: number]: string | number };

type FormAmountAndUnitSelectProps = {
  UnitEnum: AnyEnum;
  valueCount: number;
  valueName: string;
  unitName: string;
  quantityLabel?: string;
};

export const FormAmountAndUnitSelect = ({
  UnitEnum,
  valueCount,
  valueName,
  unitName,
  quantityLabel,
}: FormAmountAndUnitSelectProps) => {
  const { t } = useLokaliseTranslation('time_off');
  return (
    <Stack
      sx={{
        alignItems: 'flex-start',
        flexDirection: 'row',
        gap: 1,
      }}
    >
      <HuFormInputClassic
        name={valueName}
        rules={{
          validate: validateMinRule(1),
          required: t('general:required_field'),
        }}
        inputProps={{
          label: quantityLabel ?? t('QUANTITY'),
          type: 'number',
          hasCounter: false,
          sx: NUMBER_INPUT_STYLES,
        }}
      />
      <HuFormInputSelect
        name={unitName}
        inputProps={{
          label: t('TIME_UNIT'),
          options: Object.keys(UnitEnum).map(value => ({
            label: t(value, { count: valueCount }),
            value,
          })),
          sx: { maxWidth: '160px' },
        }}
        rules={{ required: t('REQUIRED_TIME_UNIT') }}
      />
    </Stack>
  );
};