import { type TFunction, Trans } from 'react-i18next';

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

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

import { type KnowledgeLibraryArticle } from 'src/types/library';
import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  validateMaxStringRule,
  validateRequiredStringRule,
} from 'src/utils/validation';

import { PAGE_TITLE_MAX_LENGTH } from './constants';
import { duplicateLibraryFields } from './forms';

export type DuplicateLibraryFormProps = {
  library: KnowledgeLibraryArticle;
};

export const DuplicateLibraryForm = ({
  library,
}: DuplicateLibraryFormProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('libraries');

  return (
    <Stack
      sx={{
        flexDirection: 'column',
        alignItems: 'flex-start',
        justifyContent: 'flex-start',
        width: '100%',
        gap: 3,
      }}
    >
      <Typography variant="globalS">
        {!library.parentId && t('article.duplicate.description.root')}
        {library.parentId && (
          <Trans
            i18nKey={t('article.duplicate.description.children', {
              articleName: library.parent.title,
            })}
            t={t as TFunction}
            components={{
              strong: (
                <Typography
                  fontWeight="fontWeightSemiBold"
                  component="span"
                  sx={{ color: palette.new.text.neutral.lighter }}
                />
              ),
            }}
          />
        )}
      </Typography>

      <HuFormInputClassic
        name={duplicateLibraryFields.title()}
        inputProps={{
          label: t('general:inputs.title.label'),
          placeholder: t('general:inputs.title.placeholder'),
          maxLength: PAGE_TITLE_MAX_LENGTH,
        }}
        rules={{
          validate: {
            required: validateRequiredStringRule,
            maxLength: validateMaxStringRule(PAGE_TITLE_MAX_LENGTH),
          },
        }}
      />
    </Stack>
  );
};

export default DuplicateLibraryForm;