import { type FC, useMemo } from 'react';

import { type BoxProps } from '@material-hu/mui/Box';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormAutoComplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';

import useRules, { type RulesOptions } from 'src/hooks/useRules';
import { type PolicyTypes } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type PolicyTypeInputProps = {
  name: string;
  policyTypes: PolicyTypes[];
  containerStyles?: BoxProps['sx'];
  rules?: RulesOptions;
  showingAllPolicies?: boolean;
};

const PolicyTypeInput: FC<PolicyTypeInputProps> = props => {
  const { name, policyTypes, rules, showingAllPolicies } = props;

  const { t } = useLokaliseTranslation('time_off');

  const options = useMemo(() => {
    return policyTypes.map(policyType => ({
      value: policyType.id,
      label: policyType.name,
    }));
  }, [policyTypes]);

  const formRules = useRules({
    requiredWithMessage: true,
    ...rules,
  });

  return (
    <HuCardContainer
      fullWidth
      color="grey"
    >
      <HuFormAutoComplete
        name={name}
        options={options}
        autocompleteProps={{
          label: t('what_request_type'),
          placeholder: t('request_type_one'),
          disabled: options.length === 1 && !showingAllPolicies,
          isServerFiltered: false,
        }}
        rules={formRules}
      />
    </HuCardContainer>
  );
};

export default PolicyTypeInput;
