import { FormProvider, type UseFormReturn } from 'react-hook-form';

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

import { VacationStatus } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type ResolutionDrawerContentProps = {
  form: UseFormReturn<{ resolutionReason: string }>;
  state: VacationStatus;
};

const getPlaceholderKey = (state: VacationStatus) => {
  if (state === VacationStatus.APPROVED)
    return 'provide_details_approve_request';
  if (state === VacationStatus.CANCELLED)
    return 'provide_details_cancel_request';
  return 'provide_details_reject_request';
};

const ResolutionDrawerContent = ({
  form,
  state,
}: ResolutionDrawerContentProps) => {
  const { t } = useLokaliseTranslation('time_off');

  return (
    <FormProvider {...form}>
      <HuFormInputClassic
        name="resolutionReason"
        inputProps={{
          multiline: true,
          minRows: 4,
          label: t('reason_optional'),
          placeholder: t(getPlaceholderKey(state)),
          maxLength: 250,
        }}
      />
    </FormProvider>
  );
};

export default ResolutionDrawerContent;