import useRules from 'src/hooks/useRules';
import { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import {
  newSessionFields,
  newSessionRules,
} from 'src/pages/dashboard/Learning/Sessions/New/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useSessionStatus } from '../../../hooks/useSessionStatus';
import InputText from '../InputText';

const SessionCollaborator = () => {
  const { blockSessionEdition } = useSessionStatus();
  const { t } = useLokaliseTranslation('learning');

  const collaboratorRules = useRules(
    newSessionRules.configuration.collaborator(),
  );

  return (
    <LearningCard id="session-configuration-instructor-card">
      <InputText
        id="session-configuration-instructor"
        label={t('general:inputs.optional', {
          label: t('session.instructor.label'),
        })}
        helperText={t('session.instructor.helper_text')}
        name={newSessionFields.configuration.collaborator()}
        rules={collaboratorRules}
        inputProps={{
          placeholder: t('session.instructor.placeholder'),
          maxLength: newSessionRules.configuration.collaborator().maxString!,
          disabled: blockSessionEdition,
        }}
      />
    </LearningCard>
  );
};

export default SessionCollaborator;
