import { css } from "@linaria/core";
import { defineUI } from "queenjs";
import { onUnmounted } from "vue";
import { Container, Draggable } from "vue-dndrop";
import { useEditor } from "../../..";
import { HotKeyCtrl } from "../../../controllers/HotKeyCtrl";
import Canvas from "../../Canvas";

export default defineUI({
  setup() {
    const editor = useEditor();
    const { store, actions, config } = editor;

    const hotKeyCtrl = new HotKeyCtrl(editor);
    hotKeyCtrl.init();
    onUnmounted(() => {
      hotKeyCtrl.destroy();
    });

    return () => (
      <div class={contentStyle}>
        {store.isEditMode ? (
          <Container
            style={store.designData.pageStyle}
            onDrop={(e: any) => actions.moveComp(e.removedIndex, e.addedIndex)}
            non-drag-area-selector={".drag-disable"}
          >
            {store.designData.content.map((d) => {
              const Comp: any = config.compUI[d.compKey]?.Component;
              return Comp ? (
                <Draggable key={d.id}>
                  <Comp compId={d.id} />
                </Draggable>
              ) : undefined;
            })}
          </Container>
        ) : (
          <Canvas />
        )}
      </div>
    );
  },
});

const contentStyle = css`
  border: 1px solid transparent;
  @apply min-h-750px bg-white;

  .dndrop-container.vertical > .dndrop-draggable-wrapper {
    overflow: unset;
  }
`;