import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import { Title } from '@material-hu/components/design-system/Title';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useRules from 'src/hooks/useRules';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { LearningCard } from '../../../common/components/LearningCard';
import { INSTRUCTOR_MAX_LENGTH } from '../constants';
import { newCourseFields } from '../forms';

type ConfigurationInstructorProps = {
  disabled?: boolean;
};

export const ConfigurationInstructor = ({
  disabled = false,
}: ConfigurationInstructorProps) => {
  const { t } = useLokaliseTranslation('learning');
  const HugoThemeProvider = useHuGoTheme();
  const instructorRules = useRules({ maxString: INSTRUCTOR_MAX_LENGTH });

  return (
    <HugoThemeProvider>
      <LearningCard>
        <Title
          variant="S"
          title={t('general:inputs.optional', {
            label: t('course.instructor.label'),
          })}
          description={t('course.instructor.helper_text')}
        />
        <FormInputClassic
          name={newCourseFields.configuration.instructor()}
          rules={instructorRules}
          inputProps={{
            placeholder: t('course.instructor.placeholder'),
            maxLength: INSTRUCTOR_MAX_LENGTH,
            showClear: true,
            disabled,
          }}
        />
      </LearningCard>
    </HugoThemeProvider>
  );
};