import { useMatch } from 'react-router';

import { Typography, useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';

import Alert from '@material-hu/components/design-system/Alert';
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 { LearningCard } from 'src/pages/dashboard/Learning/common/components/LearningCard';
import CategoriesAutocomplete from 'src/pages/dashboard/Learning/Settings/Categories/List/components/CreateCategoryDrawer/CategoriesAutocomplete';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { transformInputToHHmm } from 'src/utils/inputUtils';

import { coursesRoutes } from '../../../routes';
import {
  BODY_MAX_LENGTH,
  STEPPER_HEIGHT,
  TITLE_MAX_LENGTH,
  TITLE_MIN_LENGTH,
} from '../../constants';
import { newCourseFields } from '../../forms';

import { CourseCoverPicture } from './CourseCoverPicture';

export type BasicInformationProps = {
  disabled?: boolean;
};

export const BasicInformation = ({
  disabled = false,
}: BasicInformationProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation(['learning', 'validations']);
  const HugoThemeProvider = useHuGoTheme();
  const isEdit = !!useMatch(coursesRoutes.editCourse());

  const titleRules = useRules({
    requiredString: true,
    minString: TITLE_MIN_LENGTH,
  });

  const bodyRules = useRules({
    maxString: BODY_MAX_LENGTH,
  });

  return (
    <HugoThemeProvider>
      <Stack
        sx={{
          height: `calc(100% - ${STEPPER_HEIGHT})`,
          overflow: 'auto',
        }}
      >
        <Stack
          sx={{
            gap: 2,
            maxWidth: '900px',
            mx: 'auto',
            width: '100%',
            pt: 2,
            pb: 5,
          }}
        >
          {isEdit && (
            <Alert
              hasClose
              severity="info"
              title={t('course.edit_course_info')}
            />
          )}
          <Typography
            variant="globalS"
            sx={{ color: palette.new.text.neutral.lighter }}
          >
            {t('validations:required_field_disclaimer')}
          </Typography>
          <LearningCard>
            <FormInputClassic
              name={newCourseFields.basicInformation.title()}
              rules={titleRules}
              inputProps={{
                label: `${t('general:name')}*`,
                placeholder: t('general:name'),
                maxLength: TITLE_MAX_LENGTH,
                fullWidth: true,
                autoFocus: true,
                disabled,
              }}
            />
            <FormInputClassic
              name={newCourseFields.basicInformation.body()}
              rules={bodyRules}
              inputProps={{
                label: `${t('common.description')} (${t('general:optional')})`,
                placeholder: t('course.description_placeholder'),
                fullWidth: true,
                multiline: true,
                minRows: 5,
                maxRows: 6,
                maxLength: BODY_MAX_LENGTH,
                disabled,
              }}
            />
          </LearningCard>
          <LearningCard>
            <CategoriesAutocomplete
              name={newCourseFields.basicInformation.category()}
              label={`${t('general:category')} (${t('general:optional')})`}
              placeholder={t('general:select')}
              usage="listCategories"
              disabled={disabled}
            />
          </LearningCard>
          <LearningCard>
            <Title
              variant="S"
              title={`${t('course.duration.title')} (${t('general:optional')})`}
              description={t('course.duration.description')}
            />
            <FormInputClassic
              name={newCourseFields.basicInformation.duration()}
              inputProps={{
                placeholder: t('general:time_placeholder').toUpperCase(),
                hasCounter: false,
                disabled,
                transform: { input: transformInputToHHmm },
                maxLength: 5,
                sx: { maxWidth: 150 },
              }}
            />
          </LearningCard>
          <CourseCoverPicture />
        </Stack>
      </Stack>
    </HugoThemeProvider>
  );
};
