import { type FC, useCallback, useState } from 'react';

import { IconArrowLeft, IconFileTypePdf } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import MenuList from '@material-hu/components/composed-components/MenuList';
import HuCoachmark from '@material-hu/components/design-system/Coachmark';
import { type CoachMarkStepWithRef } from '@material-hu/components/design-system/Coachmark/types';
import HuSpinner from '@material-hu/components/design-system/ProgressIndicators/Spinner';

import smDownloadCertificateCoachmark from 'src/assets/images/sm_download_certificate_coachmark.svg';
import useFeatureFlag from 'src/hooks/useFeatureFlag';
import { type Task } from 'src/pages/dashboard/serviceManagement/types';
import { isApprovalTask } from 'src/pages/dashboard/serviceManagement/utils';
import { FeatureFlags } from 'src/types/featureFlags';
import { useLokaliseTranslation } from 'src/utils/i18n';

import StatusBadge from '../../../general/StatusBadge';

import HeaderSkeleton from './Skeletons/HeaderSkeleton';

export type HeaderProps = {
  onClose: () => void;
  task?: Task;
  isAgentSide?: boolean;
  loading?: boolean;
  onDownloadCertificate: () => void;
  isDownloadingCertificate?: boolean;
};

const COACHMARK_ID = 'service-request-menu-coachmark';

const Header: FC<HeaderProps> = ({
  onClose,
  task,
  loading,
  onDownloadCertificate,
  isDownloadingCertificate,
}) => {
  const { t } = useLokaliseTranslation('service_management');

  const isDownloadCertificateEnabled = useFeatureFlag(
    FeatureFlags.DOWNLOAD_CERTIFICATE_ENABLED,
  );

  const isApproval = isApprovalTask(task);

  const [menuElement, setMenuElement] = useState<HTMLDivElement | null>(null);

  const coachmarkSteps: CoachMarkStepWithRef[] = [
    {
      ref: menuElement,
      image: smDownloadCertificateCoachmark,
      title: t('new_feature.download_certificate_title'),
      description: t('new_feature.download_certificate_description'),
      placement: 'bottom',
    },
  ];

  const menuRefCallback = useCallback((node: HTMLDivElement | null) => {
    setMenuElement(node);
  }, []);

  return (
    <Stack
      sx={{
        position: 'sticky',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        p: 1.5,
      }}
    >
      <IconButton onClick={onClose}>
        <IconArrowLeft />
      </IconButton>
      {loading && <HeaderSkeleton />}
      {!loading && task && (
        <Stack
          sx={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: '100%',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <Typography
              variant="globalL"
              fontWeight="semiBold"
            >
              {isApproval
                ? t('approvals.approval_title', {
                    name: task.parentTask?.catalogItem.name,
                  })
                : task.catalogItem.name}
            </Typography>
            <StatusBadge
              state={task.state}
              isApproval={isApproval}
            />
          </Stack>
          {isDownloadCertificateEnabled &&
            (isDownloadingCertificate ? (
              <HuSpinner size={24} />
            ) : (
              <Stack ref={menuRefCallback}>
                <MenuList
                  options={[
                    {
                      Icon: IconFileTypePdf,
                      title: t('download_certificate.download'),
                      onClick: onDownloadCertificate,
                    },
                  ]}
                />
              </Stack>
            ))}
        </Stack>
      )}
      {isDownloadCertificateEnabled && (
        <HuCoachmark
          id={COACHMARK_ID}
          steps={coachmarkSteps}
          hideFooterOnOnlyOneStep
          finishOnClose
        />
      )}
    </Stack>
  );
};

export default Header;
