import { FormProvider, useForm } from 'react-hook-form';
import { type TFunction, Trans } from 'react-i18next';

import { yupResolver } from '@hookform/resolvers/yup';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import { Drawer, useDrawerLayer } from '@material-hu/components/layers/Drawers';

import { ARTICLE_TITLE_MAX_LENGTH } from 'src/pages/dashboard/HuLibraries/constants';
import { useCachedArticle } from 'src/pages/dashboard/HuLibraries/hooks/useCachedArticle';
import { useCreateArticle } from 'src/pages/dashboard/HuLibraries/hooks/useCreateArticle';
import ArticleAudienceListDrawer from 'src/pages/dashboard/HuLibraries/Segmentation/components/ArticleAudienceListDrawer';
import { type CreateArticlePayload } from 'src/pages/dashboard/HuLibraries/types';
import { handleAction } from 'src/utils/events';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { formatDefaultIcon } from 'src/utils/icons';

import { createArticleSchema } from '../../schemas';

type ArticleCreateDrawerProps = {
  articleId: number | null;
};

const ArticleCreateDrawer = ({ articleId }: ArticleCreateDrawerProps) => {
  const isRoot = !articleId;
  const { t } = useLokaliseTranslation('libraries');
  const { closeDrawer } = useDrawerLayer();
  const { article } = useCachedArticle(articleId);
  const createArticleMutation = useCreateArticle();

  const form = useForm<{ title: string }>({
    defaultValues: { title: '' },
    resolver: yupResolver(createArticleSchema),
  });

  const { handleSubmit, formState } = form;

  const handleCreateArticle = handleSubmit(values => {
    const payload: CreateArticlePayload = {
      title: values.title,
      parentId: articleId ?? null,
      icon: formatDefaultIcon(),
    };

    createArticleMutation.mutate(payload, {
      onSuccess: () => closeDrawer(),
    });
  });

  const title = isRoot ? t('article.create') : t('subarticle.create.title');
  const label = isRoot ? t('article.title_one') : t('subarticle.title_one');
  const isLoading = createArticleMutation.isLoading;

  return (
    <FormProvider {...form}>
      <Drawer.Header
        title={title}
        onClose={closeDrawer}
      />
      <Drawer.Body>
        {articleId && article?.title && (
          <Typography
            sx={{
              pb: 2,
              wordWrap: 'break-word',
              width: '100%',
              color: ({ palette }) => palette.new.text.neutral.lighter,
            }}
          >
            <Trans
              i18nKey="subarticle.adding_to_article_alert"
              ns="libraries"
              t={t as TFunction}
              values={{ articleTitle: article.title }}
              components={{
                strong: (
                  <Typography
                    fontWeight="fontWeightSemiBold"
                    component="span"
                    sx={{
                      color: ({ palette }) => palette.new.text.neutral.lighter,
                    }}
                  />
                ),
              }}
            />
          </Typography>
        )}
        <FormInputClassic
          name="title"
          inputProps={{
            label,
            placeholder: t('general:name'),
            maxLength: ARTICLE_TITLE_MAX_LENGTH,
          }}
        />
        {article?.audiencesQuery && articleId && (
          <Stack sx={{ mt: 'auto' }}>
            <ArticleAudienceListDrawer
              audiencesQuery={article.audiencesQuery}
              articleId={articleId}
              titleKey="article.collaborators.amount"
            />
          </Stack>
        )}
      </Drawer.Body>
      <Drawer.Actions
        primaryButtonProps={{
          children: t('general:create'),
          fullWidth: true,
          onClick: handleAction(handleCreateArticle),
          loading: isLoading,
          disabled: isLoading || !formState.isValid,
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          fullWidth: true,
          disabled: isLoading,
          onClick: handleAction(() => closeDrawer()),
        }}
      />
    </FormProvider>
  );
};

export default ArticleCreateDrawer;