import Empty from "@/components/Empty";
import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { useResource } from "@/modules/resource";
import { Loadmore } from "@queenjs/ui";
import { useReactive } from "@queenjs/use";
import { defineComponent } from "vue";
import { Container, Draggable } from "vue-dndrop";
import { CompList } from "./CompList";

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

    const resource = useResource();
    const { sysShapeListCtrl } = resource.controls;
    sysShapeListCtrl.loadPage(1);

    const state = useReactive(() => ({
      basicComps() {
        return [
          "Line",
          "Arc",
          "Curve",
          "Ellipse",
          "Triangle",
          "Rectage",
          "PolygonNormal",
          "Polygon",
        ].map((key) => compUICtrl.state.components.get(key) as any);
      },
    }));

    return () => {
      const dataSource = sysShapeListCtrl.state.list;
      return (
        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
          <div class="my-10px">默认</div>
          <Container
            class="grid grid-cols-3 gap-10px"
            behaviour="copy"
            group-name="canvas"
            get-child-payload={(index: number) => {
              return state.basicComps[index].compKey;
            }}
          >
            {state.basicComps.map((item) => {
              return (
                <Draggable key={item.compKey} class="!leading-0">
                  <div
                    title={item.name}
                    class="draggable-item text-center leading-50px bg-[#303030] rounded cursor-pointer hover:bg-dark-100 transition"
                    onClick={() =>
                      editor.actions.clickCompToDesign(
                        item.compKey as ICompKeys
                      )
                    }
                  >
                    <img class="h-34px m-4px" src={item.thumbnail} />
                  </div>
                </Draggable>
              );
            })}
          </Container>
          <div class="my-20px">组合</div>
          <CompList dataSource={dataSource} columns={3} isSys={true} />
          {dataSource.length == 0 ? (
            <Empty />
          ) : (
            <Loadmore
              class="mt-20px"
              loading={sysShapeListCtrl.state.loading}
              canLoad={sysShapeListCtrl.state.canLoadNext}
              onChange={sysShapeListCtrl.loadNextPage}
            />
          )}
        </div>
      );
    };
  },
});