import { PageBuilderResponse, WebsiteMenu } from '@tempi/core-renderer';
import { Page } from '@tempi/editor-site';
import { message, Modal } from 'antd';
import { isEqualContentPage, Website } from 'modules/website';
import { useMemo, useState } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { pageApi } from 'services/page';
import { websiteApi } from 'services/website';
import useSWR from 'swr';
import { t } from '../../../i18n';
interface UseWebsiteDetailProps {
  revalidateWebsiteOnMount?: boolean;
  revalidatePageOnMount?: boolean;
  onGet?: (id: number) => Promise<Website>;
  draftPageContent?: PageBuilderResponse;
}
export const useWebsiteDetail = (
  props: UseWebsiteDetailProps = {
    revalidateWebsiteOnMount: true,
    revalidatePageOnMount: true,
    onGet: websiteApi.getOneWebsite,
    draftPageContent: {},
  },
) => {
  const {
    revalidateWebsiteOnMount,
    revalidatePageOnMount,
    onGet,
    draftPageContent,
  } = props;
  const { id } = useParams<{
    id: string;
  }>();
  const [searchParams, setSearchParams] = useSearchParams();
  const pageId = +searchParams.get('pageId');
  const [loadingSavePage, setLoadingSavePage] = useState(false);
  const [{ confirm }, contextHolder] = Modal.useModal();
  const onSavePage = async (page, isMutatePage = true, showToast = false) => {
    try {
      setLoadingSavePage(true);
      await pageApi.updatePage(page?.id, page);
      isMutatePage && mutatePage();
      if (showToast) message.success(t('Lưu thành công!'));
    } catch (error) {
      console.error(error);
      //TODO: handle show error
      return error;
    } finally {
      setLoadingSavePage(false);
    }
  };
  const updateWebsite = async (data) => {
    try {
      await websiteApi.updateWebsite({ ...data, id: +id });
      mutate();
    } catch (error) {
      console.error(error);
    }
  };
  const { data, error, mutate } = useSWR(
    id ? ['/websites', id] : null,
    async (_) => {
      return onGet(+id).then((res) => {
        return res;
      });
    },
    {
      revalidateOnFocus: true,
      shouldRetryOnError: true,
      revalidateOnMount: revalidateWebsiteOnMount,
    },
  );
  const {
    data: pageData,
    error: pageError,
    mutate: mutatePage,
    isValidating: isValidatingPage,
  } = useSWR(
    pageId ? ['/page', pageId] : null,
    async (_) => {
      return pageApi.getPage(pageId, {
        device: 'desktop',
      });
    },
    {
      revalidateOnFocus: false,
      shouldRetryOnError: false,
      revalidateOnMount: revalidatePageOnMount,
    },
  );
  const activePages = useMemo(() => {
    const activeMenu = data?.menu?.filter?.(
      (menu: WebsiteMenu) => menu.linkType === 'PAGE',
    );
    if (!activeMenu) return [];
    return activeMenu.map((menuItem: WebsiteMenu) => ({
      label: menuItem.name,
      value: '/' + (menuItem?.page?.slug || ''),
    }));
    // eslint-disable-next-line
  }, [data]);
  const website = data as Website;
  const allowAutoSwitchPage = (autoSavePage: boolean) => {
    if (autoSavePage) {
      onSavePage(
        {
          id: pageData?.data?.page?.id,
          content: draftPageContent,
        },
        false,
      );
      return true;
    }
    return isEqualContentPage(pageData?.data?.page?.content, draftPageContent);
  };
  const onSwitchPage = (pageId: number) => {
    setSearchParams((prev) => ({
      ...prev,
      pageId,
    }));
  };
  const onClickSwitchPage = (pageId: number, autoSavePage: boolean) => {
    if (isValidatingPage || !pageId || pageId === pageData?.data?.page?.id)
      return;
    if (allowAutoSwitchPage(autoSavePage)) {
      onSwitchPage(pageId);
      return;
    }
    confirm({
      title: t('Chuyển trang?'),
      content: t(
        'Những thay đổi của bạn chưa được lưu, bạn có chắc muốn chuyển trang?',
      ),
      okText: t('Đồng ý'),
      cancelText: t('common.cancel'),
      onOk: () => {
        onSwitchPage(pageId);
      },
    });
  };
  return {
    onSavePage,
    loadingSavePage,
    website,
    menu: website?.menu,
    loadingGetWebsite: !data && !error,
    mutateWebsite: mutate,
    currentPage: pageData?.data?.page as Page,
    loadingGetPage: !pageData && !pageError,
    mutatePage,
    activePages,
    isValidatingPage,
    updateWebsite,
    isPageChanged: () =>
      !isEqualContentPage(pageData?.data?.page?.content, draftPageContent),
    confirm,
    contextHolder,
    onClickSwitchPage,
    onSwitchPage,
  };
};