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

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

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

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

const KnowledgeBaseBreadcrumbs = () => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation('agents');
  const { folderPath } = useParams<KnowledgeBaseRouteParams>();

  if (!folderPath) return null;

  const segments = folderPath.replace(/\/$/, '').split('/').filter(Boolean);

  const links = [
    {
      title: t('knowledge_base.breadcrumbs_home'),
      onClick: () => navigate(agentsRoutes.knowledgeBase.base()),
    },
    ...segments.map((segment, index) => {
      const isLast = index === segments.length - 1;
      const partialPath = `${segments.slice(0, index + 1).join('/')}/`;
      return {
        title: segment,
        onClick: isLast
          ? undefined
          : () =>
              navigate(
                agentsRoutes.knowledgeBase.folder(
                  encodeURIComponent(partialPath),
                ),
              ),
      };
    }),
  ];

  return <Breadcrumbs links={links} />;
};

export default KnowledgeBaseBreadcrumbs;