import { lazy } from 'react';
import { useNavigate } from 'react-router-dom';

import { useDrawerV2 } from '@material-hu/hooks/useDrawerV2';
import { useLazyModal } from '@material-hu/hooks/useLazyModal';
import {
  IconBellRinging,
  IconBookmark,
  IconCopy,
  IconTrash,
} from '@material-hu/icons/tabler';

import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';

import { useArticleId } from 'src/pages/dashboard/HuLibraries/hooks/useArticleId';
import { useArticleInformation } from 'src/pages/dashboard/HuLibraries/hooks/useArticleInformation';
import { useArticleNavigation } from 'src/pages/dashboard/HuLibraries/hooks/useArticleNavigation';
import { useCoverPictureActions } from 'src/pages/dashboard/HuLibraries/hooks/useCoverPictureActions';
import { useSharePermissionsActions } from 'src/pages/dashboard/HuLibraries/hooks/useSharePermissionsActions';
import { librariesRoutes } from 'src/pages/dashboard/HuLibraries/routes';
import {
  type Article,
  type ExtraActionConfig,
  type MainActionConfig,
} from 'src/pages/dashboard/HuLibraries/types';
import { getPillConfig } from 'src/pages/dashboard/HuLibraries/utils';
import { CopyTypePath } from 'src/types/deeplinks';
import { insertIf } from 'src/utils/arrayUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import CopyLink from 'src/components/CopyLink/CopyLink';

import { DuplicateArticleDrawer } from '../ArticleDuplicate';

import { NotificationsSettingsDrawer } from './NotificationsSettingsDrawer';

const DeleteArticleModal = lazy(() => import('./DeleteArticleModal'));
const DisabledArticleModal = lazy(() => import('./DisabledArticleModal'));
const ActivateArticleModal = lazy(() => import('./ActivateArticleModal'));

type ArticleHeaderProps = {
  article: Article;
};

export const ArticleHeader = ({ article }: ArticleHeaderProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const navigate = useNavigate();
  const { rootId, childId } = useArticleId();
  const { navigateBack } = useArticleNavigation();

  const {
    canCreateArticle,
    canEditArticle,
    canDeleteArticle,
    isActiveArticle,
    isDisabledArticle,
  } = useArticleInformation(article);

  const { actions: coverPictureActions, components: coverPictureComponents } =
    useCoverPictureActions(article);

  const { actions: shareActions, components: shareComponents } =
    useSharePermissionsActions(article);

  const pillConfig = getPillConfig(isActiveArticle, t);

  const handleReport = () => {
    if (!rootId) return;
    navigate(librariesRoutes.report(rootId, childId));
  };

  const showActivateArticle = isDisabledArticle && canEditArticle;
  const showDisableArticle = isActiveArticle && canEditArticle;

  const { modal: disabledArticleModal, showModal: showDisabledArticleModal } =
    useLazyModal(DisabledArticleModal);

  const { modal: deleteArticleModal, showModal: showDeleteArticleModal } =
    useLazyModal(DeleteArticleModal);

  const { modal: activateArticleModal, showModal: showActivateArticleModal } =
    useLazyModal(ActivateArticleModal);

  const {
    drawer: duplicateArticleDrawer,
    showDrawer: showDuplicateArticleDrawer,
  } = useDrawerV2(DuplicateArticleDrawer);

  const {
    drawer: notificationsSettingsDrawer,
    showDrawer: showNotificationsSettingsDrawer,
  } = useDrawerV2(NotificationsSettingsDrawer);

  const handleDeleteArticle = () => showDeleteArticleModal({ article });
  const handleDisableArticle = () => showDisabledArticleModal({ article });
  const handleDuplicateArticle = () => showDuplicateArticleDrawer({ article });

  const handleOpenNotificationsSettingsDrawer = () => {
    showNotificationsSettingsDrawer({
      article,
      title: t('general:notification.notify.audience.title'),
    });
  };

  const handleManageNotifications = () => {
    showNotificationsSettingsDrawer({
      article,
      title: t('general:notification.manage'),
      isManagingNotifications: true,
    });
  };

  const handleActivateArticle = () =>
    showActivateArticleModal({
      onConfirm: handleOpenNotificationsSettingsDrawer,
    });

  const extraActionConfigs: ExtraActionConfig[] = [
    {
      when: showActivateArticle,
      action: {
        key: 'activate-article',
        title: t('article.activate.title'),
        description: t('general:deactivate_anytime'),
        onClick: handleActivateArticle,
        avatar: { Icon: IconBookmark },
      },
    },
    {
      when: showDisableArticle,
      action: {
        key: 'deactivate-article',
        title: t('article.deactivate.title'),
        description: t('general:activate_anytime'),
        onClick: handleDisableArticle,
        avatar: { Icon: IconBookmark },
      },
    },
    ...coverPictureActions,
    {
      when: canCreateArticle,
      action: {
        key: 'duplicate-article',
        title: t('article.duplicate.title'),
        onClick: handleDuplicateArticle,
        avatar: { Icon: IconCopy },
      },
    },
    {
      when: canEditArticle,
      action: {
        key: 'manage-notifications',
        title: t('general:notification.manage'),
        onClick: handleManageNotifications,
        avatar: { Icon: IconBellRinging },
      },
    },
    {
      when: canDeleteArticle,
      action: {
        key: 'delete-article',
        title: t('article.delete.title'),
        onClick: handleDeleteArticle,
        avatar: { Icon: IconTrash },
      },
    },
  ];

  const mainActionConfigs: MainActionConfig[] = [
    ...shareActions,
    {
      when: canCreateArticle,
      action: {
        key: 'article-report',
        children: t('general:report.view'),
        onClick: handleReport,
      },
    },
  ];

  const extraActions = extraActionConfigs.flatMap(({ when, action }) =>
    insertIf(when, action),
  );

  const mainActions = mainActionConfigs.flatMap(({ when, action }) =>
    insertIf(when, action),
  );

  return (
    <>
      {disabledArticleModal}
      {deleteArticleModal}
      {activateArticleModal}
      {notificationsSettingsDrawer}
      {duplicateArticleDrawer}
      {coverPictureComponents}
      {shareComponents}
      <TaskFocusHeader
        title={article?.title || ''}
        onBack={navigateBack}
        pillLabel={pillConfig.label}
        extraActions={extraActions}
        mainActions={mainActions}
        copyLinkButton={
          // TODO: After migrate CopyLink to HU, remove the props from TaskFocusHeader
          <CopyLink
            type={CopyTypePath.LIBRARY}
            id={article?.id}
          />
        }
        slotProps={{
          root: {
            sx: {
              '& .MuiStack-root:first-of-type': { maxWidth: '40vw' },
              position: 'sticky',
              top: 0,
              zIndex: 99,
            },
          },
          pill: { type: pillConfig.type },
          extraActions: { closeDropdownOnClick: true },
          title: { overflow: 'tooltip', withEllipsis: true },
        }}
      />
    </>
  );
};