import { Container, Draggable } from "vue-dndrop";

import { useEditor } from "@/modules/editor";
import { useResource } from "@/modules/resource";
import { Image, Loadmore } from "@queenjs/ui";
import Empty from "@queenjs/ui/empty";
import { defineUI } from "queenjs";

export default defineUI({
  setup() {
    const editor = useEditor();
    const resource = useResource();
    resource.controls.sysSvgListCtrl.hasLimit = true;
    resource.controls.sysSvgListCtrl.loadPage(1);

    return () => {
      const ctrl = resource.controls.sysSvgListCtrl;
      const dataSource = ctrl.state.list;

      return (
        <div class="flex-1 overflow-x-hidden overflow-y-auto scrollbar">
          <Container
            class="grid grid-cols-4 gap-8px"
            behaviour="copy"
            group-name="canvas"
            animation-duration={0}
            get-child-payload={(index: number) => {
              return {
                type: "svg",
                data: dataSource[index],
              };
            }}
          >
            {dataSource.map((item: any) => {
              return (
                <Draggable key={item._id}>
                  <div
                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
                    key={item._id}
                    // title={item.title}
                    onClick={() => editor.actions.clickFrameToDesign(item)}
                  >
                    <Image
                      class="w-full rounded pointer-events-none"
                      src={item.file.url}
                      // size={240}
                    />
                  </div>
                </Draggable>
              );
            })}
          </Container>
          {dataSource.length == 0 ? (
            <Empty />
          ) : (
            <Loadmore
              class="mt-20px"
              loading={ctrl.state.loading}
              canLoad={ctrl.state.canLoadNext}
              onChange={ctrl.loadNextPage}
            />
          )}
        </div>
      );
    };
  },
});