import { useEditor } from "@/modules/editor";
import { ICompKeys } from "@/modules/editor/typings";
import { css } from "@linaria/core";
import { useReactive } from "@queenjs/use";
import { Tooltip } from "ant-design-vue";
import { defineComponent } from "vue";
import { Container, Draggable } from "vue-dndrop";

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

    const state = useReactive(() => ({
      basicComps() {
        return ["Text", "Image", "Video", "Web3D"].map(
          (key) => compUICtrl.state.components.get(key) as any
        );
      },
    }));

    return () => {
      return (
        <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} class="!leading-0">
                <div
                  class="draggable-item"
                  onClick={() =>
                    editor.actions.clickCompToDesign(item.compKey as ICompKeys)
                  }
                >
                  <Tooltip title={item.name}>
                    <span>
                      <img
                        class="h-24px m-4px pointer-events-none"
                        src={item.thumbnail}
                      />
                    </span>
                  </Tooltip>
                </div>
              </Draggable>
            );
          })}
        </Container>
      );
    };
  },
});

const basicStyle = css`
  display: flex;
  align-items: center;
  .draggable-item {
    border-radius: 4px;
    margin: 0 4px;
    cursor: pointer;
    &:hover {
      background-color: darken(@inf-component-bg, 3%);
    }
  }
`;