import { type FC } from 'react';
import { useOutletContext } from 'react-router';

import { type PolicyOutletContext } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormSelectUsers from 'src/components/FormSelectUsers';

import { policiesFields } from '../../form';

const Assignments: FC = () => {
  const { t } = useLokaliseTranslation('time_tracker');
  const { loadingPolicy = false } =
    useOutletContext<PolicyOutletContext>() || {};

  return (
    <FormSelectUsers
      title={t('policies.ASSIGN_COLLABS')}
      subtitle={t('policies.ASSIGN_COLLABS_DESCRIPTION')}
      translationPrefix="time_tracker:policies"
      participantsLabel={t('policies.SELECTED')}
      searchLabel={t('policies.SEARCH_COLLABORATOR')}
      usersFormName={policiesFields.assignments.collaborators}
      isLoading={loadingPolicy}
      hasAutomaticAssignment
    />
  );
};

export default Assignments;