import { useTheme } from '@material-hu/mui/styles';

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

import useFormatDate from 'src/hooks/useFormatDate';
import { useNavigateToCurrentArticle } from 'src/pages/dashboard/HuLibraries/hooks/useNavigateToCurrentArticle';
import { type Article } from 'src/pages/dashboard/HuLibraries/types';
import { getArticleAvatarProps } from 'src/pages/dashboard/HuLibraries/utils';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import { useArticleStatusActions } from '../hooks/useArticleStatusActions';
import { useCoverPictureActions } from '../hooks/useCoverPictureActions';
import { useDeleteActions } from '../hooks/useDeleteActions';
import { useDuplicateActions } from '../hooks/useDuplicateActions';
import { useNotificationsActions } from '../hooks/useNotificationsActions';

type ArticleEditHeaderProps = {
  article: Article;
  onSave: () => void;
  isSaving?: boolean;
  disableUnsavedWarning: () => void;
  resetUnsavedWarning: () => void;
};

export const ArticleEditHeader = ({
  article,
  onSave,
  isSaving = false,
  disableUnsavedWarning,
  resetUnsavedWarning,
}: ArticleEditHeaderProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const theme = useTheme();
  const { formatDate } = useFormatDate();
  const navigateToCurrentArticle = useNavigateToCurrentArticle();

  const { actions: statusActions, components: statusComponents } =
    useArticleStatusActions(article);
  const { actions: coverPictureActions, components: coverPictureComponents } =
    useCoverPictureActions();
  const { actions: duplicateActions, components: duplicateComponents } =
    useDuplicateActions(article, disableUnsavedWarning, resetUnsavedWarning);
  const { actions: deleteActions, components: deleteComponents } =
    useDeleteActions(article, disableUnsavedWarning, resetUnsavedWarning);

  const { actions: notificationsActions, components: notificationsComponents } =
    useNotificationsActions();

  const handleBack = () => navigateToCurrentArticle();

  const mainActions = [
    {
      key: 'save',
      children: t('general:save_changes'),
      variant: 'contained',
      onClick: onSave,
      loading: isSaving,
    } as const,
  ];

  const extraActions = [
    ...statusActions,
    ...coverPictureActions,
    ...notificationsActions,
    ...duplicateActions,
    ...deleteActions,
  ].flatMap(({ when, action }) => insertIf(when, action));

  const showLastUpdatedDescription =
    article.lastModifiedUser && article.updatedAt;

  const lastUpdatedText = t('article.header.last_updated_by', {
    name: getFullName(article.lastModifiedUser),
    day: formatDate(article.updatedAt ?? '', 'd'),
    month: formatDate(article.updatedAt ?? '', 'MMMM'),
    year: formatDate(article.updatedAt ?? '', 'yyyy'),
  });

  return (
    <>
      {statusComponents}
      {coverPictureComponents}
      {duplicateComponents}
      {deleteComponents}
      {notificationsComponents}
      <TaskFocusHeader
        title={article.title}
        onBack={handleBack}
        avatar={getArticleAvatarProps(article, theme)}
        slotProps={{
          extraActions: { closeDropdownOnClick: true },
          title: {
            variant: 'S',
            overflow: 'tooltip',
            withEllipsis: true,
            description: showLastUpdatedDescription
              ? lastUpdatedText
              : undefined,
          },
        }}
        mainActions={mainActions}
        extraActions={extraActions}
      />
    </>
  );
};
