import { useTheme } from '@material-hu/mui/styles';

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

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';

const SessionTitle = () => {
  const { t } = useLokaliseTranslation('learning');
  const { blockSessionEdition } = useSessionStatus();
  const { palette } = useTheme();

  const titleRules = useRules(newSessionRules.basic_information.title());

  return (
    <LearningCard
      id="session-basic-information-title-card"
      sx={{
        '& .MuiFormControl-root > .MuiStack-root > .MuiTypography-root::after':
          {
            content: '"*"',
            color: palette.textColors?.errorText,
          },
      }}
    >
      <HuFormInputClassic
        name={newSessionFields.basic_information.title()}
        rules={titleRules}
        inputProps={{
          disabled: blockSessionEdition,
          id: 'session-basic-information-title-input',
          label: t('general:name'),
          placeholder: t('general:name'),
          maxLength: newSessionRules.basic_information.title().maxString!,
        }}
      />
    </LearningCard>
  );
};

export default SessionTitle;
