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

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

import useRules from 'src/hooks/useRules';
import { InputsIds } from 'src/pages/dashboard/Learning/Paths/constants';
import {
  newPathFields,
  newPathRules,
} from 'src/pages/dashboard/Learning/Paths/New/form';
import { useLokaliseTranslation } from 'src/utils/i18n';

import PathCoverPicture from './PathCoverPicture';

const PathBasicInformation = () => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();

  const titleRules = useRules(newPathRules.basic_information.title());
  const descriptionRules = useRules(
    newPathRules.basic_information.description(),
  );

  return (
    <>
      <HuCardContainer
        id={InputsIds.BASIC_INFORMATION_TITLE}
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
          },
        }}
      >
        <HuFormInputClassic
          name={newPathFields.basic_information.title()}
          rules={titleRules}
          inputProps={{
            label: t('path.name'),
            placeholder: t('common.name'),
            maxLength: newPathRules.basic_information.title().maxString!,
            sx: {
              '> .MuiTypography-root::after': {
                content: '"*"',
                color: palette.textColors?.errorText,
              },
            },
          }}
        />
      </HuCardContainer>
      <HuCardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
          },
        }}
      >
        <HuFormInputClassic
          name={newPathFields.basic_information.description()}
          rules={descriptionRules}
          inputProps={{
            label: t('common.description'),
            placeholder: t('common.description'),
            maxLength: newPathRules.basic_information.description().maxString!,
            multiline: true,
            minRows: 3,
            maxRows: 10,
            showClear: false,
            sx: {
              '& .MuiInputAdornment-root': { ml: 0 },
              '& textarea': { pr: 1.5 },
            },
          }}
        />
      </HuCardContainer>
      <PathCoverPicture />
    </>
  );
};

export default PathBasicInformation;
