import { lazy, Suspense } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

import { yupResolver } from '@hookform/resolvers/yup';
import { type GetDrawerConfiguration } from '@material-hu/hooks/useDrawerV2';
import { useLazyModal } from '@material-hu/hooks/useLazyModal';

import Skeleton from '@material-hu/components/design-system/Skeleton';

import { useArticleId } from 'src/pages/dashboard/HuLibraries/hooks/useArticleId';
import { useDuplicateArticle } from 'src/pages/dashboard/HuLibraries/hooks/useDuplicateArticle';
import { librariesRoutes } from 'src/pages/dashboard/HuLibraries/routes';
import { duplicateArticleSchema } from 'src/pages/dashboard/HuLibraries/schemas';
import {
  type Article,
  type DuplicateArticlePayload,
} from 'src/pages/dashboard/HuLibraries/types';
import { handleAction } from 'src/utils/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { DuplicateArticleForm } from './DuplicateArticleForm';

const CancelDuplicateArticleModal = lazy(
  () => import('./CancelDuplicateArticleModal'),
);

const ArticleAudienceListDrawer = lazy(
  () =>
    import(
      'src/pages/dashboard/HuLibraries/Segmentation/components/ArticleAudienceListDrawer'
    ),
);

type Props = GetDrawerConfiguration<{ article: Article }>;

export const DuplicateArticleDrawer: Props = ({ article, closeDrawer }) => {
  const { t } = useLokaliseTranslation('libraries');
  const navigate = useNavigate();
  const { rootId } = useArticleId();

  const duplicateMutation = useDuplicateArticle(article, rootId);

  const form = useForm<DuplicateArticlePayload>({
    values: {
      title: '',
      parentId: article?.parentId || null,
    },
    defaultValues: { title: '', parentId: null },
    resolver: yupResolver(duplicateArticleSchema),
  });

  const { handleSubmit, reset, formState } = form;

  const { modal: cancelWarningModal, showModal: showCancelWarningModal } =
    useLazyModal(CancelDuplicateArticleModal);

  const handleCloseAndReset = () => {
    closeDrawer();
    reset();
  };

  const handleCloseDrawer = () => {
    if (formState.isDirty) {
      showCancelWarningModal({ onConfirm: handleCloseAndReset });
      return;
    }

    handleCloseAndReset();
  };

  const handleDuplicate = handleSubmit(values => {
    duplicateMutation.mutate(values, {
      onSuccess: ({ data: newArticle }) => {
        handleCloseAndReset();
        const navigateTo =
          values.parentId && rootId
            ? librariesRoutes.article(rootId, newArticle.id)
            : librariesRoutes.article(newArticle.id);

        navigate(navigateTo);
      },
    });
  });

  return {
    title: t('article.duplicate.title'),
    children: (
      <>
        {cancelWarningModal}
        <FormProvider {...form}>
          <Suspense
            fallback={
              <Skeleton
                height="100%"
                width="600px"
              />
            }
          >
            <DuplicateArticleForm articleName={article?.parent?.title || ''} />
            {article?.audiencesQuery && article.id && (
              <ArticleAudienceListDrawer
                audiencesQuery={article.audiencesQuery}
                articleId={article.id}
                titleKey="article.collaborators.viewers_title"
              />
            )}
          </Suspense>
        </FormProvider>
      </>
    ),
    onClose: handleCloseDrawer,
    primaryButtonProps: {
      children: t('general:create'),
      fullWidth: true,
      loading: duplicateMutation.isLoading,
      disabled: duplicateMutation.isLoading,
      onClick: handleAction(handleDuplicate),
    },
    secondaryButtonProps: {
      children: t('general:cancel'),
      fullWidth: true,
      disabled: duplicateMutation.isLoading,
      onClick: handleAction(handleCloseDrawer),
    },
  };
};