import { useFormContext, useWatch } from 'react-hook-form';
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 FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';

import { ARTICLE_TITLE_MAX_LENGTH } from 'src/pages/dashboard/HuLibraries/constants';
import { type DuplicateArticlePayload } from 'src/pages/dashboard/HuLibraries/types';
import { useLokaliseTranslation } from 'src/utils/i18n';

type DuplicateArticleFormProps = { articleName: string };

export const DuplicateArticleForm = ({
  articleName,
}: DuplicateArticleFormProps) => {
  const { palette } = useTheme();
  const { t } = useLokaliseTranslation('libraries');
  const { control } = useFormContext<DuplicateArticlePayload>();
  const parentId = useWatch({ control, name: 'parentId' });

  return (
    <Stack sx={{ gap: 2, height: '100%' }}>
      <Typography sx={{ color: palette.new.text.neutral.lighter }}>
        {!parentId && t('article.duplicate.description.root')}
        {parentId && (
          <Trans
            i18nKey={t('article.duplicate.description.children', {
              articleName,
            })}
            t={t as TFunction}
            components={{
              strong: (
                <Typography
                  fontWeight="fontWeightSemiBold"
                  component="span"
                  sx={{ color: palette.new.text.neutral.lighter }}
                />
              ),
            }}
          />
        )}
      </Typography>
      <FormInputClassic
        name="title"
        inputProps={{
          label: t('general:inputs.title.label'),
          placeholder: t('general:inputs.title.placeholder'),
          maxLength: ARTICLE_TITLE_MAX_LENGTH,
        }}
      />
    </Stack>
  );
};