import { memo, useCallback, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';

import LibrariesSidebar from '@material-hu/components/composed-components/LibrariesSidebar';
import { SidebarWrapper } from '@material-hu/components/composed-components/LibrariesSidebar/components/SidebarWrapper';
import { type SortedItem } from '@material-hu/components/composed-components/LibrariesSidebar/types';
import { getNewPositionOrders } from '@material-hu/components/composed-components/LibrariesSidebar/utils';
import { useDrawerLayer } from '@material-hu/components/layers/Drawers';

import { queryClient } from 'src/config/react-query';
import usePermissions from 'src/hooks/usePermissions';
import { getCacheArticle } from 'src/pages/dashboard/HuLibraries/utils';
import { UserPermissions } from 'src/utils/permissions';

import ArticleCreateDrawer from '../Article/components/ArticleCreate';
import { useArticleId } from '../hooks/useArticleId';
import { useBulkUpdatePosition } from '../hooks/useBulkUpdatePosition';
import { getArticleQueryOptions } from '../hooks/useGetArticle';
import { useSidebarModel } from '../hooks/useSidebarModel';
import { librariesRoutes } from '../routes';

import { SidebarSearchBar } from './SidebarSearchBar';

const MemoizedLibrariesSidebar = memo(LibrariesSidebar);

export const Sidebar = memo(() => {
  const { rootId } = useArticleId();
  const navigate = useNavigate();

  const { hasAll: canCreateLibraries } = usePermissions([
    UserPermissions.CREATE_KNOWLEDGE_LIBRARIES,
  ]);

  const { openDrawer } = useDrawerLayer();

  const { mutate: bulkUpdatePosition } = useBulkUpdatePosition(rootId);

  const { model, isLoading, onItemClick } = useSidebarModel(rootId);

  const capabilities = useMemo(
    () => ({
      canCreate: canCreateLibraries,
      showStatusBadge: true,
    }),
    [canCreateLibraries],
  );

  const handleSort = useCallback(
    (payload: SortedItem[]) => {
      bulkUpdatePosition({ orders: getNewPositionOrders(payload) });
    },
    [bulkUpdatePosition],
  );

  const handleCreate = useCallback(
    (articleId?: number) => {
      openDrawer({
        content: <ArticleCreateDrawer articleId={articleId ?? null} />,
      });
    },
    [openDrawer],
  );

  const handleAddMouseEnter = useCallback((articleId?: number) => {
    if (!articleId) return;

    const cachedArticle = getCacheArticle(articleId);
    if (cachedArticle) return;
    queryClient.prefetchQuery(getArticleQueryOptions(articleId));
  }, []);

  const handleBack = useCallback(() => {
    navigate(librariesRoutes.base());
  }, [navigate]);

  const onAdd = useMemo(
    () => (canCreateLibraries ? handleCreate : undefined),
    [canCreateLibraries, handleCreate],
  );

  return (
    <SidebarWrapper>
      <SidebarSearchBar />
      <MemoizedLibrariesSidebar
        model={model}
        capabilities={capabilities}
        parentId={rootId}
        loading={isLoading}
        onBack={handleBack}
        onAddMouseEnter={handleAddMouseEnter}
        onSort={handleSort}
        onAdd={onAdd}
        onItemClick={onItemClick}
      />
    </SidebarWrapper>
  );
});