import { For } from 'solid-js';
import type { DeckStore } from '../hooks/deckStore';

export interface LayerEditorPanelProps {
  store: DeckStore;
}

/**
 * 图层编辑面板：图层可见性切换、位置编辑、复制代码
 */
export function LayerEditorPanel(props: LayerEditorPanelProps) {
  const { store } = props;

  return (
    <div class="w-64 flex-shrink-0">
      <h3 class="font-bold mb-2">图层</h3>

      <div class="space-y-2">
        <For each={store.state.layerConfigs}>
          {(layer) => (
            <div class="flex items-center gap-2">
              <input
                type="checkbox"
                checked={layer.visible}
                onChange={() => store.actions.toggleLayerVisible(layer.prop)}
                class="cursor-pointer"
              />
              <span class="text-sm flex-1">{layer.prop}</span>
              <button
                onClick={() => store.actions.setEditingLayer(store.state.editingLayer === layer.prop ? null : layer.prop)}
                class={`text-xs px-2 py-0.5 rounded cursor-pointer ${
                  store.state.editingLayer === layer.prop
                    ? 'bg-blue-500 text-white'
                    : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
                }`}
              >
                {store.state.editingLayer === layer.prop ? '✓ 框选' : '编辑'}
              </button>
            </div>
          )}
        </For>
      </div>

      <hr class="my-4" />

      <button
        onClick={store.actions.copyCode}
        class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-2 rounded text-sm font-medium cursor-pointer"
      >
        📋 复制代码
      </button>
    </div>
  );
}