import { useFormContext, useWatch } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';

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

import { pathsRoutes } from 'src/pages/dashboard/Learning/Paths/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';

import { type NewPathFormValues } from '../../types';

const PathNewHeader = () => {
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();
  const { control } = useFormContext<NewPathFormValues>();

  const basicInformation = useWatch({
    control,
    name: 'basic_information',
  });

  const title = basicInformation?.title
    ? basicInformation.title
    : t('path.create');

  const isDraft =
    !!basicInformation?.id && basicInformation?.status === 'DRAFT';

  return (
    <HuTaskFocusHeader
      key={title}
      title={title}
      onClose={() => navigate(pathsRoutes.base())}
      pillLabel={isDraft ? t('path.status.draft') : undefined}
      slotProps={{
        pill: { type: 'neutral' },
        title: {
          sx: { maxWidth: '400px' },
          withEllipsis: true,
          overflow: 'tooltip',
        },
      }}
    />
  );
};

export default PathNewHeader;