import { useEditor } from "@/modules/editor";
import { defineComponent } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { View } from "../View";

export const Component = defineComponent({
  props: {
    compId: string()
  },
  emits: ["update:compId"],
  setup(props, { emit }) {
    const compConf =  useCompData(props.compId || "") ;
    
    const { store, controls } = useEditor();
    async function changeVal() {
      const url = await controls.pickCtrl.pickOneImage();
      if (!url) return;

      compConf.value.url = url;
      compConf.value.x = 0;
      compConf.value.y = 0;
      compConf.value.s = 1;
    }

    //hello
    console.log("compConf", compConf)

    if (!props.compId) {
        emit("update:compId", compConf.id)
    } 


    return () => {
      const value = compConf.value;
      const scale = value?.s || 1;
      const ox = value?.x || 0;
      const oy = value?.y || 0;
      const objectFit =
        scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
          ? "cover"
          : "contain";

      console.log("Scalexxxxxxxxxxxxxxxxxx=>", compConf);

      return (
        <View
          compId={compConf.id}
          onDblclick={store.isEditMode ? changeVal : undefined}
        >
          <img
            class={"w-1/1 h-1/1 object-cover pointer-events-none"}
            style={{
              transform: `scale(${scale}) translate(${ox}%,${oy}%)`,
              objectFit,
            }}
            src={value?.url}
          />
        </View>
      );
    };
  },
});