import { useNavigate, useParams } from 'react-router-dom';

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

import StateCard, {
  type StateCardProps,
} from '@material-hu/components/design-system/StateCard';

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

import { agentsRoutes } from '../../../routes';
import { type KnowledgeBaseRouteParams } from '../../types';

type KnowledgeBaseTableStateProps = {
  state: 'emptySearch' | 'empty' | 'error';
  onClick?: () => void;
};

const KnowledgeBaseTableState = ({
  state,
  onClick,
}: KnowledgeBaseTableStateProps) => {
  const { t } = useLokaliseTranslation(['agents', 'general']);
  const { folderPath } = useParams<KnowledgeBaseRouteParams>();
  const navigate = useNavigate();

  const navigateToUpload = () => {
    navigate(agentsRoutes.knowledgeBase.uploadFile(folderPath));
  };

  const cardPropsByState: Record<
    KnowledgeBaseTableStateProps['state'],
    StateCardProps
  > = {
    empty: {
      title: t('knowledge_base.empty.title'),
      description: t('knowledge_base.empty.description'),
      primaryAction: {
        label: t('general:upload_file'),
        onClick: navigateToUpload,
      },
    },
    emptySearch: {
      title: t('general:empty_search_title'),
      description: t('general:empty_search_description'),
    },
    error: {
      title: t('general:error_title'),
      description: t('knowledge_base.error'),
      primaryAction: {
        label: t('general:retry'),
        onClick,
      },
    },
  };

  return (
    <StateCard
      {...cardPropsByState[state]}
      slotProps={{
        card: {
          sx: {
            animation: `${appearFromBottom} 0.5s ease`,
          },
        },
      }}
    />
  );
};

export default KnowledgeBaseTableState;