import { useState } from 'react';
import { useParams } from 'react-router-dom';

import { IconArrowBack, IconFolder } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';

import Drawer from '@material-hu/components/design-system/Drawer';
import ListItem from '@material-hu/components/design-system/List/components/ListItem';
import Title from '@material-hu/components/design-system/Title';
import { useDrawerLayer } from '@material-hu/components/layers/Drawers';

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

import { getCurrentFolderName, getParentPath } from './utils';
import { useGetKnowledgeBaseFiles } from '../../hooks/useGetKnowledgeBaseFiles';
import { useUpdateKnowledgeBaseItem } from '../../hooks/useUpdateKnowledgeBaseItem';
import {
  type KnowledgeBaseItem,
  KnowledgeBaseItemType,
  type KnowledgeBaseRouteParams,
} from '../../types';
import MoveItemDirectory from './MoveItemDirectory';
import MoveItemLoader from './MoveItemLoader';

type MoveItemDrawerProps = {
  item: KnowledgeBaseItem;
};

const MoveItemDrawer = ({ item }: MoveItemDrawerProps) => {
  const { t } = useLokaliseTranslation('agents');
  const { closeDrawer } = useDrawerLayer();
  const { folderPath = '' } = useParams<KnowledgeBaseRouteParams>();

  const [browsedPath, setBrowsedPath] = useState<string>(folderPath);

  const { items, isLoading } = useGetKnowledgeBaseFiles({
    folderPath: browsedPath,
  });

  const { updateFile, updateFolder } = useUpdateKnowledgeBaseItem();

  const isFolder = item.type === KnowledgeBaseItemType.FOLDER;
  const isAtRoot = browsedPath === '';
  const isMovingIntoItself = isFolder && browsedPath.startsWith(item.path);

  const handleNavigateInto = (folderPath: string) => {
    setBrowsedPath(folderPath);
  };

  const handleNavigateUp = () => {
    setBrowsedPath(getParentPath(browsedPath));
  };

  const handleMove = () => {
    if (isFolder) {
      updateFolder.mutate(
        {
          path: item.path,
          payload: { newParent: browsedPath },
          type: 'move',
        },
        { onSuccess: () => closeDrawer() },
      );
    } else {
      updateFile.mutate(
        {
          filename: item.path,
          payload: { newFolder: browsedPath },
          type: 'move',
        },
        { onSuccess: () => closeDrawer() },
      );
    }
  };

  const backRowLabel = isAtRoot
    ? t('knowledge_base.move_drawer.root_label')
    : getCurrentFolderName(browsedPath);

  return (
    <>
      <Drawer.Header
        title={t('knowledge_base.move_drawer.title', { name: item.name })}
        onClose={() => closeDrawer()}
      />

      <Drawer.Body>
        <Stack sx={{ mb: 4, flexDirection: 'row' }}>
          {isAtRoot && (
            <Title
              title={t('knowledge_base.move_drawer.root_label')}
              variant="S"
            />
          )}

          {!isAtRoot && (
            <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
              <IconButton
                onClick={handleNavigateUp}
                aria-label={t('general:back')}
              >
                <IconArrowBack />
              </IconButton>

              <ListItem
                text={{ title: backRowLabel }}
                avatar={{ Icon: IconFolder }}
                slotProps={{ container: { sx: { p: 0 } } }}
              />
            </Stack>
          )}
        </Stack>

        {isLoading && <MoveItemLoader />}

        {!isLoading && (
          <MoveItemDirectory
            key={`move-item-drawer-content-${browsedPath}`}
            items={items}
            handleNavigateInto={handleNavigateInto}
            itemPath={item.path}
          />
        )}
      </Drawer.Body>

      <Drawer.Actions
        primaryButtonProps={{
          children: t('knowledge_base.move_drawer.move'),
          onClick: handleMove,
          fullWidth: true,
          disabled: browsedPath === folderPath || isMovingIntoItself,
          loading: updateFolder.isLoading || updateFile.isLoading,
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          onClick: () => closeDrawer(),
          fullWidth: true,
        }}
      />
    </>
  );
};

export default MoveItemDrawer;