import {
  IconCircleCheck,
  IconCircleDashedCheck,
  IconLock,
  IconProgressCheck,
  type TablerIcon,
} from '@material-hu/icons/tabler';

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

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

import { PathCourseStatus as PathCourseStatusEnum } from '../../types';

type StatusProps = {
  Icon: TablerIcon;
  title?: string;
  description: string;
};

export type PathCourseStatusProps = {
  status: PathCourseStatusEnum | null;
};

const PathCourseStatus = ({ status }: PathCourseStatusProps) => {
  const { t } = useLokaliseTranslation('learning');

  const PROPS_BY_STATUS: Record<PathCourseStatusEnum, StatusProps> = {
    [PathCourseStatusEnum.BLOCKED]: {
      Icon: IconLock,
      title: t('course.blocked.title'),
      description: t('course.blocked.description'),
    },
    [PathCourseStatusEnum.IN_PROGRESS]: {
      Icon: IconProgressCheck,
      description: t('course.in_progress.title'),
    },
    [PathCourseStatusEnum.FINISHED]: {
      Icon: IconCircleCheck,
      description: t('course.finished.title'),
    },
    [PathCourseStatusEnum.PENDING]: {
      Icon: IconCircleDashedCheck,
      description: t('course.pending.title'),
    },
  };

  if (!status) return null;

  const { title, description, Icon } = PROPS_BY_STATUS[status];

  return (
    <Tooltip
      title={title}
      description={description}
    >
      <Icon />
    </Tooltip>
  );
};

export default PathCourseStatus;