Genarrative/src/components/image-editor/ImageCanvasSidebarView.tsx

import { CheckSquare, FolderPlus, Square } from 'lucide-react';
import type {
  Dispatch,
  PointerEvent as ReactPointerEvent,
  RefObject,
  SetStateAction,
} from 'react';
import { useMemo, useState } from 'react';

import { PlatformTextField } from '../common/PlatformTextField';
import {
  filterGroupedAssetsBySearch,
  layerMatchesSearch,
  layerStartsWithSearch,
} from './ImageCanvasAssetLibraryModel';
import {
  type GroupedEditorAssetFolder,
  ImageCanvasAssetLibraryPanelView,
  type UploadFilesOptions,
  type UploadRequestOptions,
} from './ImageCanvasAssetLibraryPanelView';
import { EditorIconButton } from './ImageCanvasEditorPrimitives';
import type {
  AssetMarqueeState,
  AssetPointerDragState,
  CanvasContextMenuState,
  CanvasLayer,
  EditorAsset,
  EditorAssetFolder,
  ImageContextMenuState,
  SidebarPanel,
  UploadTarget,
} from './ImageCanvasEditorTypes';
import { ImageCanvasLayerPanelView } from './ImageCanvasLayerPanelView';
import {
  type AssetSelectionInteraction,
  getSelectableAssets,
} from './useImageCanvasAssetSelection';

export type { GroupedEditorAssetFolder, UploadFilesOptions };

export type ImageCanvasSidebarViewProps = {
  activeSidebarPanel: SidebarPanel | null;
  assetListRef: RefObject<HTMLDivElement | null>;
  assetPointerDragRef: { current: AssetPointerDragState | null };
  suppressAssetClickRef: { current: boolean };
  assets: EditorAsset[];
  groupedAssets: GroupedEditorAssetFolder[];
  assetFolders: EditorAssetFolder[];
  layers: CanvasLayer[];
  selectedLayerId: string | null;
  selectedLayerIds: string[];
  isAssetSelectionMode: boolean;
  selectedAssetIds: Set<string>;
  assetMoveDropFolderId: string | null;
  pinnedAssetMoveFolderId: string | null;
  creatingFolder: boolean;
  newFolderName: string;
  renamingFolder: { folderId: string; value: string } | null;
  renamingAsset: { assetId: string; value: string } | null;
  isExportingSelectedAssets: boolean;
  assetMarquee: AssetMarqueeState | null;
  setCreatingFolder: Dispatch<SetStateAction<boolean>>;
  setNewFolderName: Dispatch<SetStateAction<string>>;
  setRenamingFolder: Dispatch<
    SetStateAction<{ folderId: string; value: string } | null>
  >;
  setRenamingAsset: Dispatch<
    SetStateAction<{ assetId: string; value: string } | null>
  >;
  setActiveUploadFolderId: Dispatch<SetStateAction<string>>;
  setUploadDropTarget: Dispatch<SetStateAction<'canvas' | 'assets' | null>>;
  setAssetPointerDrag: Dispatch<SetStateAction<AssetPointerDragState | null>>;
  setImageContextMenu: Dispatch<SetStateAction<ImageContextMenuState | null>>;
  setContextMenu: Dispatch<SetStateAction<CanvasContextMenuState | null>>;
  onAssetMarqueePointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
  onAssetMarqueePointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
  onAssetMarqueePointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
  onAssetMarqueePointerCancel: (
    event: ReactPointerEvent<HTMLDivElement>,
  ) => void;
  onAssetMarqueeLostPointerCapture: (
    event: ReactPointerEvent<HTMLDivElement>,
  ) => void;
  updateAssetMoveDropFolder: (folderId: string | null) => void;
  addUploadedFiles: (
    files: FileList | File[],
    options?: UploadFilesOptions,
  ) => void;
  requestUpload: (target: UploadTarget, options?: UploadRequestOptions) => void;
  moveAssetToFolder: (assetId: string, folderId: string) => void;
  commitNewAssetFolder: () => void | Promise<void>;
  toggleAssetFolder: (folderId: string) => void;
  startRenamingFolder: (folder: EditorAssetFolder) => void;
  commitFolderRename: (folder: EditorAssetFolder) => void;
  deleteAssetFolder: (folder: EditorAssetFolder) => void;
  startRenamingAsset: (asset: EditorAsset) => void;
  commitAssetRename: (asset: EditorAsset) => void;
  deleteUploadedAsset: (asset: EditorAsset) => void;
  submitAssetToShowcase: (asset: EditorAsset) => void;
  toggleAssetSelected: (
    assetId: string,
    interaction: AssetSelectionInteraction,
  ) => void;
  addAssetLayer: (asset: EditorAsset) => void;
  onDownloadAsset: (asset: EditorAsset) => void;
  toggleAllAssetsSelected: (visibleAssetIds: string[]) => void;
  downloadSelectedAssets: () => void | Promise<void>;
  deleteSelectedAssets: (assetIds?: ReadonlySet<string>) => void;
  openAssetSelectionMode: () => void;
  closeAssetSelectionMode: () => void;
  groupSelectedLayers: () => void;
  selectSingleLayer: (layerId: string | null) => void;
  resolveContextMenuPosition: (
    clientX: number,
    clientY: number,
    menuKind: 'blank' | 'layer',
  ) => Omit<CanvasContextMenuState, 'kind' | 'layerId' | 'canvasPoint'>;
  getCanvasPointFromClient: (
    clientX: number,
    clientY: number,
  ) => { x: number; y: number };
};

export function ImageCanvasSidebarView({
  activeSidebarPanel,
  assetListRef,
  assetPointerDragRef,
  suppressAssetClickRef,
  groupedAssets,
  assetFolders,
  layers,
  selectedLayerId,
  selectedLayerIds,
  isAssetSelectionMode,
  selectedAssetIds,
  assetMoveDropFolderId,
  pinnedAssetMoveFolderId,
  creatingFolder,
  newFolderName,
  renamingFolder,
  renamingAsset,
  isExportingSelectedAssets,
  assetMarquee,
  setCreatingFolder,
  setNewFolderName,
  setRenamingFolder,
  setRenamingAsset,
  setActiveUploadFolderId,
  setUploadDropTarget,
  setAssetPointerDrag,
  setImageContextMenu,
  setContextMenu,
  onAssetMarqueePointerDown,
  onAssetMarqueePointerMove,
  onAssetMarqueePointerUp,
  onAssetMarqueePointerCancel,
  onAssetMarqueeLostPointerCapture,
  updateAssetMoveDropFolder,
  addUploadedFiles,
  requestUpload,
  moveAssetToFolder,
  commitNewAssetFolder,
  toggleAssetFolder,
  startRenamingFolder,
  commitFolderRename,
  deleteAssetFolder,
  startRenamingAsset,
  commitAssetRename,
  deleteUploadedAsset,
  submitAssetToShowcase,
  toggleAssetSelected,
  addAssetLayer,
  onDownloadAsset,
  toggleAllAssetsSelected,
  downloadSelectedAssets,
  deleteSelectedAssets,
  openAssetSelectionMode,
  closeAssetSelectionMode,
  groupSelectedLayers,
  selectSingleLayer,
  resolveContextMenuPosition,
  getCanvasPointFromClient,
}: ImageCanvasSidebarViewProps) {
  const [assetSearchQuery, setAssetSearchQuery] = useState('');
  const [layerSearchQuery, setLayerSearchQuery] = useState('');
  const filteredGroupedAssets = useMemo(
    () => filterGroupedAssetsBySearch(groupedAssets, assetSearchQuery),
    [assetSearchQuery, groupedAssets],
  );
  const filteredAssetsCount = useMemo(
    () =>
      filteredGroupedAssets.reduce(
        (totalCount, folder) => totalCount + folder.assets.length,
        0,
      ),
    [filteredGroupedAssets],
  );
  const visibleAssetIds = useMemo(
    () =>
      filteredGroupedAssets.flatMap((folder) =>
        folder.collapsed
          ? []
          : getSelectableAssets(folder.assets).map((asset) => asset.id),
      ),
    [filteredGroupedAssets],
  );
  const allVisibleAssetsSelected =
    visibleAssetIds.length > 0 &&
    visibleAssetIds.every((assetId) => selectedAssetIds.has(assetId));

  const normalizedLayerSearchQuery = layerSearchQuery.trim().toLowerCase();
  const filteredLayers = useMemo(
    () =>
      normalizedLayerSearchQuery
        ? [
            ...layers.filter((layer) =>
              layerStartsWithSearch(layer, normalizedLayerSearchQuery),
            ),
            ...layers.filter(
              (layer) =>
                !layerStartsWithSearch(layer, normalizedLayerSearchQuery) &&
                layerMatchesSearch(layer, normalizedLayerSearchQuery),
            ),
          ]
        : layers,
    [layers, normalizedLayerSearchQuery],
  );

  if (!activeSidebarPanel) {
    return null;
  }

  return (
    <aside
      className={[
        'image-canvas-editor__sidebar',
        activeSidebarPanel === 'assets' && isAssetSelectionMode
          ? 'image-canvas-editor__sidebar--asset-selection'
          : '',
      ]
        .filter(Boolean)
        .join(' ')}
      aria-label="图片资源栏"
    >
      <div className="image-canvas-editor__sidebar-header">
        <div className="min-w-0">
          <h2 className="image-canvas-editor__sidebar-title">
            {activeSidebarPanel === 'assets' ? '素材' : '图层'}
          </h2>
          <div className="image-canvas-editor__sidebar-count">
            {activeSidebarPanel === 'assets'
              ? filteredAssetsCount
              : filteredLayers.length}
          </div>
        </div>
        {activeSidebarPanel === 'assets' ? (
          <div className="image-canvas-editor__sidebar-header-actions">
            <EditorIconButton
              className="image-canvas-editor__icon-button"
              label="素材选择模式"
              title="选择"
              icon={isAssetSelectionMode ? CheckSquare : Square}
              pressed={isAssetSelectionMode}
              onClick={
                isAssetSelectionMode
                  ? closeAssetSelectionMode
                  : openAssetSelectionMode
              }
            />
            <EditorIconButton
              className="image-canvas-editor__icon-button"
              label="新建素材文件夹"
              title="新建文件夹"
              icon={FolderPlus}
              onClick={() => setCreatingFolder(true)}
            />
          </div>
        ) : (
          <EditorIconButton
            className="image-canvas-editor__icon-button"
            label="图层打组"
            title="打组"
            icon={FolderPlus}
            disabled={!selectedLayerId && selectedLayerIds.length === 0}
            onClick={groupSelectedLayers}
          />
        )}
      </div>

      <div className="image-canvas-editor__sidebar-search">
        <PlatformTextField
          aria-label={
            activeSidebarPanel === 'assets' ? '搜索素材' : '搜索画布图层'
          }
          placeholder={
            activeSidebarPanel === 'assets' ? '搜索素材' : '搜索图层'
          }
          value={
            activeSidebarPanel === 'assets'
              ? assetSearchQuery
              : layerSearchQuery
          }
          size="xs"
          density="compact"
          className="image-canvas-editor__sidebar-search-input"
          onChange={(event) => {
            if (activeSidebarPanel === 'assets') {
              setAssetSearchQuery(event.target.value);
            } else {
              setLayerSearchQuery(event.target.value);
            }
          }}
        />
      </div>

      {activeSidebarPanel === 'assets' ? (
        <ImageCanvasAssetLibraryPanelView
          assetListRef={assetListRef}
          assetPointerDragRef={assetPointerDragRef}
          suppressAssetClickRef={suppressAssetClickRef}
          groupedAssets={filteredGroupedAssets}
          assetFolders={assetFolders}
          isAssetSelectionMode={isAssetSelectionMode}
          selectedAssetIds={selectedAssetIds}
          visibleAssetIds={visibleAssetIds}
          assetMoveDropFolderId={assetMoveDropFolderId}
          pinnedAssetMoveFolderId={pinnedAssetMoveFolderId}
          creatingFolder={creatingFolder}
          newFolderName={newFolderName}
          renamingFolder={renamingFolder}
          renamingAsset={renamingAsset}
          allVisibleAssetsSelected={allVisibleAssetsSelected}
          isExportingSelectedAssets={isExportingSelectedAssets}
          assetMarquee={assetMarquee}
          setCreatingFolder={setCreatingFolder}
          setNewFolderName={setNewFolderName}
          setRenamingFolder={setRenamingFolder}
          setRenamingAsset={setRenamingAsset}
          setActiveUploadFolderId={setActiveUploadFolderId}
          setUploadDropTarget={setUploadDropTarget}
          setAssetPointerDrag={setAssetPointerDrag}
          onAssetMarqueePointerDown={onAssetMarqueePointerDown}
          onAssetMarqueePointerMove={onAssetMarqueePointerMove}
          onAssetMarqueePointerUp={onAssetMarqueePointerUp}
          onAssetMarqueePointerCancel={onAssetMarqueePointerCancel}
          onAssetMarqueeLostPointerCapture={onAssetMarqueeLostPointerCapture}
          updateAssetMoveDropFolder={updateAssetMoveDropFolder}
          addUploadedFiles={addUploadedFiles}
          requestUpload={requestUpload}
          moveAssetToFolder={moveAssetToFolder}
          commitNewAssetFolder={commitNewAssetFolder}
          toggleAssetFolder={toggleAssetFolder}
          startRenamingFolder={startRenamingFolder}
          commitFolderRename={commitFolderRename}
          deleteAssetFolder={deleteAssetFolder}
          startRenamingAsset={startRenamingAsset}
          commitAssetRename={commitAssetRename}
          deleteUploadedAsset={deleteUploadedAsset}
          submitAssetToShowcase={submitAssetToShowcase}
          toggleAssetSelected={toggleAssetSelected}
          addAssetLayer={addAssetLayer}
          onDownloadAsset={onDownloadAsset}
          toggleAllAssetsSelected={toggleAllAssetsSelected}
          downloadSelectedAssets={downloadSelectedAssets}
          deleteSelectedAssets={deleteSelectedAssets}
          closeAssetSelectionMode={closeAssetSelectionMode}
        />
      ) : (
        <ImageCanvasLayerPanelView
          layers={filteredLayers}
          selectedLayerId={selectedLayerId}
          selectedLayerIds={selectedLayerIds}
          setImageContextMenu={setImageContextMenu}
          setContextMenu={setContextMenu}
          selectSingleLayer={selectSingleLayer}
          resolveContextMenuPosition={resolveContextMenuPosition}
          getCanvasPointFromClient={getCanvasPointFromClient}
        />
      )}
    </aside>
  );
}