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

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

import { type CoursesPaginatedQueryStates } from '../../hooks/useGetCourses';
import { type CourseStatus } from '../../types';

export type CourseListStateCardProps = {
  status: CourseStatus;
  state: CoursesPaginatedQueryStates;
  onRetry: () => void;
};

export const CourseListStateCard = ({
  status,
  state,
  onRetry,
}: CourseListStateCardProps) => {
  const { t } = useLokaliseTranslation(['learning', 'general']);

  const toLowerCaseStatus = status.toLowerCase();

  const cardPropsByState = {
    error: {
      variant: 'warning' as const,
      title: t('empty.error.title'),
      description: t('empty.error.description'),
      primaryAction: {
        label: t('empty.error.action'),
        onClick: onRetry,
      },
    },
    networkError: {
      variant: 'wifi-off' as const,
      title: t('empty.network.title'),
      description: t('empty.network.description'),
      primaryAction: {
        label: t('empty.error.action'),
        onClick: onRetry,
      },
    },
    empty: {
      title: t(`empty.courses.${toLowerCaseStatus}.title`),
      description: t(`empty.courses.${toLowerCaseStatus}.description`),
    },
    emptyCategory: {
      title: `${t(`empty.courses.${toLowerCaseStatus}.title`)} ${t('common.on_this_category')}`,
      description: t(`empty.courses.${toLowerCaseStatus}.description`),
    },
    emptySearch: {
      title: t('general:empty_search_title'),
      description: t('general:empty_search_description'),
    },
  };

  const cardProps = cardPropsByState[state as keyof typeof cardPropsByState];

  if (!cardProps) return null;

  return <StateCard {...cardProps} />;
};

export default CourseListStateCard;
