import {
  ClipboardList,
  Download,
  Hand,
  ImageIcon,
  ImagePlus,
  MousePointer2,
  Shapes,
  Sparkles,
  Type,
  WandSparkles,
} from 'lucide-react';
import type { RefObject } from 'react';

import { EditorIconButton } from './ImageCanvasEditorPrimitives';
import type { CanvasTool } from './ImageCanvasEditorTypes';

type ImageCanvasBottomToolbarViewProps = {
  specToolWrapRef: RefObject<HTMLSpanElement | null>;
  effectiveTool: CanvasTool;
  onSwitchTool: (tool: CanvasTool) => void;
};

const canvasTools: Array<{
  id: CanvasTool;
  label: string;
  icon: typeof MousePointer2;
}> = [
  { id: 'select', label: '选择工具', icon: MousePointer2 },
  { id: 'hand', label: '抓手工具', icon: Hand },
  { id: 'upload', label: '上传工具', icon: ImagePlus },
  { id: 'generate', label: '生成工具', icon: WandSparkles },
  { id: 'spec', label: '生成规范', icon: ClipboardList },
  { id: 'character', label: '生成角色形象', icon: Sparkles },
  { id: 'icon', label: '生成图标素材', icon: ImageIcon },
  { id: 'text', label: '文字工具', icon: Type },
  { id: 'shape', label: '形状标注工具', icon: Shapes },
  { id: 'export', label: '导出工具', icon: Download },
];

export function ImageCanvasBottomToolbarView({
  specToolWrapRef,
  effectiveTool,
  onSwitchTool,
}: ImageCanvasBottomToolbarViewProps) {
  return (
    <div
      className="image-canvas-editor__bottom-toolbar"
      role="toolbar"
      aria-label="AI画布工具栏"
      onPointerDown={(event) => event.stopPropagation()}
    >
      {canvasTools.map(({ id, label, icon: Icon }) =>
        id === 'spec' ? (
          <span
            key={id}
            ref={specToolWrapRef}
            className="image-canvas-editor__spec-tool-wrap"
          >
            <EditorIconButton
              label={label}
              title={label}
              icon={Icon}
              pressed={effectiveTool === id}
              onClick={() => onSwitchTool(id)}
            />
          </span>
        ) : (
          <EditorIconButton
            key={id}
            label={label}
            title={label}
            icon={Icon}
            pressed={effectiveTool === id}
            onClick={() => onSwitchTool(id)}
          />
        ),
      )}
    </div>
  );
}