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

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

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

import { type SessionsPaginatedQueryStates } from '../../hooks/useGetSessions';
import { useSessionsFilters } from '../../hooks/useSessionsFilters';

type SessionListStateCardProps = {
  state: SessionsPaginatedQueryStates;
  onRetry: () => void;
};

export const SessionListStateCard = ({
  state,
  onRetry,
}: SessionListStateCardProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { tab } = useSessionsFilters();

  const cardPropsByState = {
    error: {
      variant: 'warning' as const,
      title: t('empty.error.title'),
      description: t('empty.error.description'),
      primaryAction: {
        label: t('general:retry'),
        onClick: onRetry,
      },
    },
    networkError: {
      variant: 'wifi-off' as const,
      title: t('empty.network.title'),
      description: t('empty.network.description'),
      primaryAction: {
        label: t('general:retry'),
        onClick: onRetry,
      },
    },
    empty: {
      title: t(`empty.sessions.${tab?.toLowerCase()}.title`),
      description: t(`empty.sessions.${tab?.toLowerCase()}.description`),
    },
    emptySearch: {
      title: t('empty.sessions.search.title'),
      description: t('empty.sessions.search.description'),
    },
  };

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

  if (!cardProps) return null;

  return (
    <StateCard
      sx={{ animation: `${fadeIn} 200ms ease-in-out backwards` }}
      {...cardProps}
    />
  );
};
