ttrpg-tools/src/components/stores/deckStore.ts

import { createStore, produce } from 'solid-js/store';
import type { CardData, LayerConfig, Dimensions } from '../types';

export interface DeckState {
  // 基本属性
  size: string;
  grid: string;
  bleed: string;
  padding: string;
  fixed: boolean;
  src: string;
  
  // 解析后的尺寸
  dimensions: Dimensions | null;
  
  // 卡牌数据
  cards: CardData[];
  activeTab: number;
  
  // 图层配置
  layerConfigs: LayerConfig[];
  
  // 编辑状态
  isEditing: boolean;
  editingLayer: string | null;
  
  // 框选状态
  isSelecting: boolean;
  selectStart: { x: number; y: number } | null;
  selectEnd: { x: number; y: number } | null;
}

export interface DeckActions {
  // 基本属性设置
  setSize: (size: string) => void;
  setGrid: (grid: string) => void;
  setBleed: (bleed: string) => void;
  setPadding: (padding: string) => void;
  
  // 数据设置
  setCards: (cards: CardData[]) => void;
  setActiveTab: (index: number) => void;
  updateCardData: (index: number, key: string, value: string) => void;
  
  // 图层操作
  setLayerConfigs: (configs: LayerConfig[]) => void;
  updateLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
  toggleLayerVisible: (prop: string) => void;
  
  // 编辑状态
  setIsEditing: (editing: boolean) => void;
  setEditingLayer: (layer: string | null) => void;
  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
  
  // 框选操作
  setIsSelecting: (selecting: boolean) => void;
  setSelectStart: (pos: { x: number; y: number } | null) => void;
  setSelectEnd: (pos: { x: number; y: number } | null) => void;
  cancelSelection: () => void;
  
  // 初始化
  initialize: (props: Record<string, any>, csvPath: string) => void;
  
  // 生成代码
  generateCode: () => string;
  copyCode: () => void;
}

export interface DeckStore extends DeckState, DeckActions {}

/**
 * 创建 deck store
 */
export function createDeckStore(): DeckStore {
  const [state, setState] = createStore<DeckState>({
    size: '54x86',
    grid: '5x8',
    bleed: '1',
    padding: '2',
    fixed: false,
    src: '',
    dimensions: null,
    cards: [],
    activeTab: 0,
    layerConfigs: [],
    isEditing: false,
    editingLayer: null,
    isSelecting: false,
    selectStart: null,
    selectEnd: null
  });

  const setSize = (size: string) => setState({ size });
  const setGrid = (grid: string) => setState({ grid });
  const setBleed = (bleed: string) => setState({ bleed });
  const setPadding = (padding: string) => setState({ padding });
  
  const setCards = (cards: CardData[]) => setState({ cards });
  const setActiveTab = (index: number) => setState({ activeTab: index });
  const updateCardData = (index: number, key: string, value: string) => {
    setState('cards', index, key, value);
  };
  
  const setLayerConfigs = (configs: LayerConfig[]) => setState({ layerConfigs: configs });
  const updateLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
    setState('layerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
  };
  const toggleLayerVisible = (prop: string) => {
    setState('layerConfigs', (prev) => prev.map((config) =>
      config.prop === prop ? { ...config, visible: !config.visible } : config
    ));
  };
  
  const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
  const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
    const layer = state.editingLayer;
    if (!layer) return;
    setState('layerConfigs', (prev) => prev.map((config) =>
      config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
    ));
    setState({ editingLayer: null });
  };
  
  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
  const cancelSelection = () => {
    setState({ isSelecting: false, selectStart: null, selectEnd: null });
  };
  
  const initialize = (props: Record<string, any>, csvPath: string) => {
    setState({
      size: props.size as string || '54x86',
      grid: props.grid as string || '5x8',
      bleed: props.bleed as string || '1',
      padding: props.padding as string || '2',
      fixed: props.fixed === true || props.fixed === 'true',
      src: csvPath
    });
  };
  
  const generateCode = () => {
    const layersStr = state.layerConfigs
      .map(l => `${l.prop}=${l.x1},${l.y1},${l.x2},${l.y2}`)
      .join('|');
    return `:md-deck[${state.src}]{size="${state.size}" grid="${state.grid}" bleed="${state.bleed}" padding="${state.padding}" layers="${layersStr}"}`;
  };
  
  const copyCode = () => {
    const code = generateCode();
    navigator.clipboard.writeText(code).then(() => {
      alert('已复制到剪贴板！');
    }).catch(err => {
      console.error('复制失败:', err);
    });
  };

  return {
    ...state,
    setSize,
    setGrid,
    setBleed,
    setPadding,
    setCards,
    setActiveTab,
    updateCardData,
    setLayerConfigs,
    updateLayerConfig,
    toggleLayerVisible,
    setIsEditing,
    setEditingLayer,
    updateLayerPosition,
    setIsSelecting,
    setSelectStart,
    setSelectEnd,
    cancelSelection,
    initialize,
    generateCode,
    copyCode
  };
}