import { useEditor } from "@/modules/editor";
import { css } from "@linaria/core";
import { useReactive } from "@queenjs/use";
import { defineUI } from "queenjs";
import CustomComps from "./CustomComps";
import Frames from "./Templates";
import { Sources } from "./Sources";

export default defineUI({
  setup() {
    const editor = useEditor();
    const { compUICtrl, frameControl } = editor.controls;

    const tabs = [
      { label: "模板", value: "frame" },
      { label: "平台组件", value: "senior" },
      { label: "我的组件", value: "user" },
      { label: "我的素材", value: "source" },
    ];

    const state = useReactive(() => ({
      currTabType: "frame",
      basicComps() {
        return ["Text", "Image", "Video", "Web3D"].map(
          (key) => compUICtrl.state.components.get(key) as any
        );
      },
      currComps() {
        return Array.from(compUICtrl.state.components.values()).filter(
          (item) => state.currTabType === item.compType
        );
      },
    }));

    return () => (
      <div class="h-full flex flex-col">
        <div class="p-16px border-bottom !border-2px">资源中心</div>
        <div class="m-16px flex-1 flex flex-col h-0">
          <div class={tabStyle}>
            {tabs.map((item) => {
              return (
                <span
                  class={[state.currTabType === item.value && "checked"]}
                  onClick={() => (state.currTabType = item.value)}
                >
                  {item.label}
                </span>
              );
            })}
          </div>
          {state.currTabType == "frame" && (
            <Frames
              class="flex-1 -mx-16px p-16px"
              // dataSource={frameControl.listCtrl.state.list}
            />
          )}
          {/* {(state.currTabType == "user" || state.currTabType == "senior") && (
            <CustomComps
              class="flex-1 -mx-16px p-16px"
              components={state.currComps}
            />
          )} */}
          {state.currTabType == "source" && (
            <Sources class="flex-1 -mx-16px p-16px" />
          )}
        </div>
      </div>
    );
  },
});

const tabStyle = css`
  @apply text-16px my-16px space-x-10px;

  span {
    cursor: pointer;
    &.checked {
      font-weight: bold;
    }
  }
`;