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

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props) {
    const { store, controls } = useEditor();
    const { value } = useCompData(props.compId);

    const state = reactive({
      visible: false,
    });

    async function pickPack() {
      await controls.pickCtrl.onPickPack();
      value.url =
        "https://www.sku3d.com/share.html?id=6478676ca494a3ea15a6fa82";
    }

    function openWeb3D() {
      if (value.openWindow) {
        window.open(value.url);
      } else {
        state.visible = true;
      }
    }

    return () => {
      return (
        <View
          compId={props.compId}
          onDblclick={store.isEditMode ? pickPack : undefined}
        >
          {!state.visible ? (
            <img
              class={[
                "w-full h-full object-cover",
                store.isEditMode && "pointer-events-none",
              ]}
              style={{ aspectRatio: value.ratio }}
              src={value.poster}
              onClick={openWeb3D}
            />
          ) : (
            <iframe
              class="w-full h-full border-none"
              src={value.url}
              style={{ aspectRatio: value.ratio }}
            />
          )}
        </View>
      );
    };
  },
});