import { Empty } from "@queenjs/ui";
import { defineUI } from "queenjs";
import { useEditor } from "../../../..";
import { CompTree } from "./CompTree";
import { css } from "@linaria/core";

export default defineUI({
  setup() {
    const editor = useEditor();

    return () => {
      const { currComp } = editor.store;
      const Form =
        editor.controls.compUICtrl.state.components.get(currComp?.compKey)
          ?.Form || Empty;
      return (
        <div class="flex flex-col h-1/1">
          <div class="p-16px border-bottom !border-2px">设置栏</div>
          <div class="flex-1 p-16px scrollbar">
            <Form component={currComp} />
          </div>
          <div class="p-16px border-bottom !border-2px border-top">组件树</div>
          <div class="h-360px py-20px pr-20px scrollbar">
            <CompTree class={compTreeCls} />
          </div>
        </div>
      );
    };
  },
});

const compTreeCls = css`
  .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #404040;
  }
`;
