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

import { IconFolderPlus, IconUpload } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

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

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

const NEW_FOLDER_DIALOG_ID = 'knowledge-base-new-folder-dialog';

const KnowledgeBaseHeader = () => {
  const { t } = useLokaliseTranslation('agents');
  const navigate = useNavigate();
  const { folderPath } = useParams<KnowledgeBaseRouteParams>();
  const { openDialog, closeDialog } = useDialogLayer();

  const parentPath = folderPath ? decodeURIComponent(folderPath) : '';

  const handleNewFolder = () => {
    openDialog(
      {
        content: (
          <NewFolderDialog
            parentPath={parentPath}
            onClose={() => closeDialog(NEW_FOLDER_DIALOG_ID)}
          />
        ),
      },
      NEW_FOLDER_DIALOG_ID,
    );
  };

  return (
    <Stack
      sx={{
        gap: 1,
        flexDirection: 'row',
        alignItems: 'center',
      }}
    >
      <KnowledgeBaseBreadcrumbs />

      <Stack sx={{ flexDirection: 'row', gap: 1, ml: 'auto' }}>
        <Button
          variant="primary"
          onClick={() =>
            navigate(agentsRoutes.knowledgeBase.uploadFile(parentPath))
          }
          startIcon={<IconUpload />}
        >
          {t('general:upload_file')}
        </Button>

        <Button
          variant="secondary"
          onClick={handleNewFolder}
          startIcon={<IconFolderPlus />}
        >
          {folderPath
            ? t('knowledge_base.new_subfolder')
            : t('knowledge_base.new_folder')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default KnowledgeBaseHeader;