import { useMemo } from 'react';
import { useLocation, useNavigate } from 'react-router';

import { fadeIn } from '@material-hu/utils/animations';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import { type SessionDetail } from '../../types';
import { getSessionStatusType } from '../../utils';

type AttendanceHeaderProps = {
  session?: SessionDetail;
  isLoading: boolean;
};

export const AttendanceHeader = ({
  session,
  isLoading,
}: AttendanceHeaderProps) => {
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();
  const { state } = useLocation() as { state: { backRoute: string } };

  const handleBack = () => {
    if (state?.backRoute) navigate(state?.backRoute);
    else navigate(-1);
  };

  const pillLabel = useMemo(() => {
    if (isLoading || !session?.status) return '';

    return t(`session.status.${session?.status?.toLowerCase()}_one`);
  }, [session?.status, isLoading]);

  const entranceAnimation = `${fadeIn} 0.5s ease-in-out`;

  return (
    <TaskFocus
      onBack={handleBack}
      title={session?.title || ''}
      pillLabel={pillLabel}
      slotProps={{
        title: {
          sx: { animation: entranceAnimation },
          overflow: 'tooltip',
          withEllipsis: true,
        },
        pill: {
          type: getSessionStatusType(session?.status!),
          sx: { animation: entranceAnimation },
        },
      }}
    />
  );
};