import { createSignal } from "solid-js";
import type { DeckStore } from "./hooks/deckStore";
import { LayerEditorPanel, PropertiesEditorPanel } from "./editor-panel";

export interface EditorTabsProps {
  store: DeckStore;
}

type TabKey = "sizing" | "front" | "back";

/**
 * 编辑面板：尺寸 / 正面图层 / 背面图层 用标签页切换，节省横向空间
 */
export function EditorTabs(props: EditorTabsProps) {
  const { store } = props;
  const [tab, setTab] = createSignal<TabKey>("sizing");

  const tabs: { key: TabKey; label: string }[] = [
    { key: "sizing", label: "尺寸" },
    { key: "front", label: "正面图层" },
    { key: "back", label: "背面图层" },
  ];

  const selectTab = (key: TabKey) => {
    setTab(key);
    // 切换正/背面标签时，同步预览的显示面
    if (key === "front") store.actions.setActiveSide("front");
    if (key === "back") store.actions.setActiveSide("back");
  };

  return (
    <div class="w-64 shrink-0">
      {/* 标签页切换 */}
      <div class="flex gap-1 mb-3">
        {tabs.map((t) => (
          <button
            onClick={() => selectTab(t.key)}
            class={`flex-1 px-3 py-1.5 rounded text-sm font-medium cursor-pointer ${
              tab() === t.key
                ? "bg-blue-600 text-white"
                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab() === "sizing" ? (
        <PropertiesEditorPanel store={store} />
      ) : (
        <LayerEditorPanel
          store={store}
          side={tab() === "front" ? "front" : "back"}
        />
      )}
    </div>
  );
}