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 SessionVirtual = () => {
  const { blockSessionEdition } = useSessionStatus();
  const { t } = useLokaliseTranslation('learning');

  const meetingLinkRules = useRules(
    newSessionRules.configuration.meetingLink({ required: true }),
  );

  return (
    <LearningCard id="session-configuration-virtual-location-card">
      <InputText
        id="session-configuration-virtual-meeting-link"
        name={newSessionFields.configuration.meetingLink()}
        rules={meetingLinkRules}
        required
        label={t('session.meeting_link.label')}
        helperText={t('session.meeting_link.helper_text.virtual')}
        inputProps={{
          placeholder: t('session.meeting_link.placeholder'),
          maxLength: newSessionRules.configuration.meetingLink().maxString!,
          disabled: blockSessionEdition,
        }}
      />
    </LearningCard>
  );
};

export default SessionVirtual;