import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { css } from "@linaria/core";
import { useReactive } from "@queenjs/use";
import { defineUI } from "queenjs";
import { Container, Draggable } from "vue-dndrop";
import CustomComps from "./CustomComps";
import { MySources } from "./MySources";

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

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

    const state = useReactive(() => ({
      currTabType: "senior",
      basicComps() {
        return Array.from(compUICtrl.state.components.values()).filter(
          (item) =>
            item.compType === "basic" &&
            !["Page", "Container", "Group"].includes(item.compKey)
        );
      },
      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">
          {/* <Radio.Group>
            <Radio.Button>模板</Radio.Button>
            <Radio.Button>组件</Radio.Button>
          </Radio.Group> */}
          <div class="text-16px font-bold mb-16px">基础组件</div>
          <Container
            class={basicStyle}
            orientation="horizontal"
            behaviour="copy"
            group-name="canvas"
            get-child-payload={(index: number) => {
              return state.basicComps[index].compKey;
            }}
          >
            {state.basicComps.map((item) => {
              return (
                <Draggable key={item.compKey}>
                  <div
                    class="draggable-item p-4px text-center"
                    onClick={() =>
                      editor.actions.clickCompToDesign(
                        item.compKey as ICompKeys
                      )
                    }
                  >
                    <img
                      class="h-30px my-4px pointer-events-none"
                      src={item.thumbnail}
                    />
                    <div>{item.name}</div>
                  </div>
                </Draggable>
              );
            })}
          </Container>
          <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 !== "source" ? (
            <CustomComps
              class="flex-1 -mx-16px p-16px"
              components={state.currComps}
            />
          ) : (
            <MySources class="flex-1 -mx-16px p-16px" />
          )}
        </div>
      </div>
    );
  },
});

const basicStyle = css`
  /* margin: -10px; */
  /* border-spacing: 10px; */

  .draggable-item {
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      background-color: darken(@inf-component-bg, 3%);
    }
  }
`;

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

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