import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { HoursRequestType } from '../../hooks/useRequestCreate';
import { useValidations } from '../../hooks/useValidations';

const RequestHourType = () => {
  const { t } = useLokaliseTranslation('time_off');
  const { requiredRules } = useValidations();

  const options = [
    {
      value: HoursRequestType.LESS_THAN_ONE_DAY,
      label: t('less_than_one_day_option'),
    },
    {
      value: HoursRequestType.MORE_THAN_ONE_DAY,
      label: t('more_than_one_day_option'),
    },
  ];

  return (
    <HuCardContainer
      fullWidth
      color="grey"
    >
      <HuFormInputSelect
        name="hoursRequestType"
        inputProps={{
          options,
          label: t('how_long_time_request_title'),
          placeholder: t('request_duration'),
        }}
        rules={requiredRules}
      />
    </HuCardContainer>
  );
};

export default RequestHourType;
