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

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

import { logEvent } from 'src/config/logging';
import { EventName } from 'src/types/amplitude';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { useArticleId } from '../../hooks/useArticleId';
import { useArticleNavigation } from '../../hooks/useArticleNavigation';
import { huLibrariesRoutes } from '../../routes';
import { type Article } from '../../types';
import { getArticleStatusPillProps } from '../../utils';

type ArticleHeaderProps = {
  article?: Article;
  isLoading?: boolean;
};

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

  const isEditor = article?.isEditor ?? false;

  const handleEdit = () => {
    if (!article || !rootId) return;
    logEvent(EventName.LIBRARY_CONTENT_EDIT_CLICK, {
      libraryId: article.id,
      parentId: article.parentId,
      title: article.title,
    });
    navigate(huLibrariesRoutes.edit(rootId, childId));
  };

  const mainActions = [
    {
      key: 'edit',
      children: t('edit'),
      variant: 'contained',
      onClick: handleEdit,
    } as const,
  ];

  const pillProps = article
    ? getArticleStatusPillProps(article.status, t)
    : undefined;

  return (
    <TaskFocusHeader
      loading={isLoading}
      title={article?.title || ''}
      onBack={navigateBack}
      pillLabel={isEditor ? pillProps?.label : undefined}
      slotProps={{
        root: {
          sx: {
            '& .MuiStack-root:first-of-type': { maxWidth: '40vw' },
            position: 'sticky',
            top: 0,
            zIndex: 99,
          },
        },
        title: { overflow: 'tooltip', withEllipsis: true },
        pill: isEditor && pillProps ? pillProps : undefined,
      }}
      mainActions={isEditor ? mainActions : undefined}
    />
  );
};