import { useFormContext, useWatch } from 'react-hook-form';

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

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

import {
  CERTIFICATE_BASIC_INFO_INPUT_IDS,
  CERTIFICATE_DESCRIPTION_MAX_LENGTH,
  CERTIFICATE_HEADING_TITLE_MAX_LENGTH,
  CERTIFICATE_NAME_MAX_LENGTH,
  CERTIFICATE_SUBTITLE_MAX_LENGTH,
} from 'src/pages/dashboard/Learning/Settings/Certificates/Create/constants';
import { certificateCreateFields } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/form';
import { type CertificateCreateFormValues } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/types';
import { getCertificateFieldTypesInText } from 'src/pages/dashboard/Learning/Settings/Certificates/Create/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CertificateVariableFieldInput from './CertificateVariableFieldInput';

const CertificateBasicInfoForm = () => {
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const { control } = useFormContext<CertificateCreateFormValues>();

  const requiredLabelSx = {
    fontWeight: 'fontWeightSemiBold' as const,
    '&::after': { content: '"*"', color: palette.new.text.feedback.error },
  } as const;

  const [subtitle, description] = useWatch({
    control,
    name: [
      certificateCreateFields.subtitle(),
      certificateCreateFields.description(),
    ],
  });

  const subtitleTokens = getCertificateFieldTypesInText(subtitle ?? '', t);
  const descriptionTokens = getCertificateFieldTypesInText(
    description ?? '',
    t,
  );

  return (
    <Stack sx={{ gap: 2 }}>
      <CardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            width: '100%',
          },
        }}
      >
        <Stack sx={{ gap: 0.5, width: '100%' }}>
          <Typography
            component="label"
            variant="globalS"
            htmlFor={CERTIFICATE_BASIC_INFO_INPUT_IDS.certificateName}
            sx={requiredLabelSx}
          >
            {t('settings.certificates.create_flow.certificate_name')}
          </Typography>
          <FormInputClassic
            name={certificateCreateFields.name()}
            inputProps={{
              id: CERTIFICATE_BASIC_INFO_INPUT_IDS.certificateName,
              placeholder: t(
                'settings.certificates.create_flow.certificate_name',
              ),
              fullWidth: true,
              maxLength: CERTIFICATE_NAME_MAX_LENGTH,
              autoFocus: true,
              hasCounter: true,
            }}
          />
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={{
          '& .MuiCardContent-root': {
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            width: '100%',
          },
        }}
      >
        <Stack sx={{ gap: 0.5, width: '100%' }}>
          <Typography
            component="label"
            variant="globalS"
            htmlFor={CERTIFICATE_BASIC_INFO_INPUT_IDS.headingTitle}
            sx={requiredLabelSx}
          >
            {t('common.title')}
          </Typography>
          <FormInputClassic
            name={certificateCreateFields.title()}
            inputProps={{
              id: CERTIFICATE_BASIC_INFO_INPUT_IDS.headingTitle,
              placeholder: t('common.title'),
              fullWidth: true,
              maxLength: CERTIFICATE_HEADING_TITLE_MAX_LENGTH,
              hasCounter: true,
            }}
          />
        </Stack>
        <CertificateVariableFieldInput
          label={`${t('common.subtitle')} (${t('general:optional')})`}
          id={CERTIFICATE_BASIC_INFO_INPUT_IDS.subtitle}
          name={certificateCreateFields.subtitle()}
          placeholder={t('common.subtitle')}
          maxLength={CERTIFICATE_SUBTITLE_MAX_LENGTH}
          isOptionDisabled={type => subtitleTokens.has(type)}
        />
        <CertificateVariableFieldInput
          label={`${t('common.description')} (${t('general:optional')})`}
          id={CERTIFICATE_BASIC_INFO_INPUT_IDS.description}
          name={certificateCreateFields.description()}
          placeholder={t('common.description')}
          maxLength={CERTIFICATE_DESCRIPTION_MAX_LENGTH}
          maxRows={8}
          isOptionDisabled={type => descriptionTokens.has(type)}
        />
      </CardContainer>
    </Stack>
  );
};

export default CertificateBasicInfoForm;
