import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { Image } from "@queenjs/ui";
import { defineUI } from "queenjs";
import { Container, Draggable } from "vue-dndrop";
import { any } from "vue-types";

export default defineUI({
  props: {
    components: any<
      {
        compKey: string;
        name: string;
        thumbnail: string;
      }[]
    >().isRequired,
  },
  setup(props) {
    const editor = useEditor();
    return () => (
      <Container
        class="space-y-10px scrollbar"
        behaviour="copy"
        group-name="canvas"
        get-child-payload={(index: number) => {
          return props.components[index].compKey;
        }}
      >
        {props.components.map((item) => {
          return (
            <Draggable>
              <div
                class="text-center leading-50px bg-dark-50 rounded draggable-item"
                key={item.compKey}
                title={item.name}
                onClick={() =>
                  editor.actions.addCompToDesign(item.compKey as ICompKeys)
                }
              >
                <Image
                  class="w-full rounded pointer-events-none"
                  src={item.thumbnail}
                  size={240}
                />
              </div>
            </Draggable>
          );
        })}
      </Container>
    );
  },
});