import { useEditor } from "@/modules/editor";
import { inject, onMounted, provide, ref } from "vue";

export function useCompRef(compId: string) {
  const compRef = ref();
  const { store, helper } = useEditor();

  const parentId = compId !== "root" ? (inject("compParentId") as string) : "";
  provide("compParentId", compId);
  store.setCompPid(compId, parentId);

  onMounted(() => {
    const comp = helper.findComp(compId);
    if (comp) {
      Object.defineProperties(comp, {
        $el: {
          value: compRef.value,
          configurable: true,
        },
      });
      compRef.value.compId= compId;
      compRef.value.compKey= comp.compKey;
    }

    if (comp?.compKey == "Page" && store.isPreview && store.rootPage.value.pageMode == "short") {
      let downY = 0;
      compRef.value.addEventListener("touchstart", (e:TouchEvent)=>{
          //  e.preventDefault();
          //  e.stopPropagation();

           console.log("touch start");
           store.shortPage.offset = 0;

           downY = e.targetTouches[0].clientY;
           store.shortPage.isMoving = false;
      })

      compRef.value.addEventListener("touchmove", (e:TouchEvent)=>{
        e.preventDefault();
        e.stopPropagation();

        let offset = e.targetTouches[0].clientY -  downY
        console.log("touch moving", offset);
        store.shortPage.isMoving = true;
        if (offset < 0 ) {
           if (store.shortPage.index == store.streamCardIds.length -1) {
            offset = 0;
           }
        }
        if (offset > 0 ) {
          if (store.shortPage.index == 0) {
            offset = 0;
          }
        }
        store.shortPage.offset = offset;
      })

      compRef.value.addEventListener("touchend", (e:TouchEvent)=>{
        store.shortPage.isMoving = false;
        if (store.shortPage.offset < 0 ) {
             store.shortPage.index +=1;
        } 
        if (store.shortPage.offset > 0 ) {
          store.shortPage.index -=1;
          if (store.shortPage.index < 0 ) {
            store.shortPage.index = 0;
          }
        }
        store.shortPage.offset = 0;
      });
    }
  });
  return compRef;
}

export function useCompEditLayerRef(compId: string) {

  const editLayerRef = ref<HTMLElement>();
  const { helper, store } = useEditor();

  onMounted(() => {
      if ( !editLayerRef.value ) return;
      const comp = helper.findComp(compId);
      if (comp) {
          Object.defineProperties(comp, {
          $editor: {
              value: editLayerRef.value,
              configurable: true,
          },
          });
          const dom = editLayerRef.value
          helper.setCompEditLayer(compId, ()=>{
              const {left, top, width, height} = dom.getBoundingClientRect();
               return {
                  left,top, width,height
               }
          })
      }
  });
  return editLayerRef;

}