import { defineComponent } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../..";
import { useCompRef } from "../hooks";
import { css } from "@linaria/core";

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props, { slots }) {
    const editor = useEditor();
    const { helper } = editor;
    const { children, layout } = useCompData(props.compId);
    const compRef = useCompRef(props.compId);

    return () => (
      <div ref={compRef} style={helper.createStyle(layout)} class={["!h-auto" , editor.store.isEditMode? pageEditStyle :""]}>
        <div class="relative">
          {slots.Container?.(
            children.default.map((compId) => {
              const comp = helper.findComp(compId);
              return slots.CompItem?.(comp);
            })
          )}
        </div>
      </div>
    );
  },
});

const pageEditStyle = css`
   box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
`