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

import { useArticleInformation } from 'src/pages/dashboard/HuLibraries/hooks/useArticleInformation';
import { useNavigateToCurrentArticle } from 'src/pages/dashboard/HuLibraries/hooks/useNavigateToCurrentArticle';
import { type Article } from 'src/pages/dashboard/HuLibraries/types';
import { getPillConfig } from 'src/pages/dashboard/HuLibraries/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

type ArticleInternalHeaderProps = {
  article: Article | undefined;
  loading?: boolean;
};

const ArticleInternalHeader = ({
  article,
  loading,
}: ArticleInternalHeaderProps) => {
  const { t } = useLokaliseTranslation('libraries');
  const handleBack = useNavigateToCurrentArticle();

  const { isActiveArticle } = useArticleInformation(article);

  const pillConfig = getPillConfig(isActiveArticle, t);

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

export default ArticleInternalHeader;