import { useEditor } from "@/modules/editor";
import { ref, onMounted, defineComponent, nextTick } from "vue";
import { css } from "@linaria/core";
import { string ,any} from "vue-types";
import { useCompEditLayerRef } from "./hooks";

const WidthEditlayer = defineComponent({
     props: {
        compId: string().isRequired
     },

     setup(props, {slots}) {
     
        const { helper, store } = useEditor();
        if (!store.isEditMode) {
            return ()=>(slots.default?.())
        }
        const editLayerRef = useCompEditLayerRef(props.compId);

        return ()=>(
            <div class="relative">
                {
                    slots.default?.()
                }
                <div class={editLayerStyle} ref={editLayerRef}>
                </div>
            </div>
        )
     },
})

const editLayerStyle = css`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
`

export {WidthEditlayer}