import { css } from "@linaria/core";

import { defineComponent, onMounted, reactive, ref } from "vue";

import { useCtx } from "../../context";
import { object, string } from "vue-types";
import { useScenePackPreview } from "queentree/hooks/useScenePackPreview";
import { getQuery } from "queenjs/framework/utils/methods/uri";
import { Spin } from "ant-design-vue";
import { LoadingOutlined } from "@ant-design/icons-vue";
import { useCurrCtx } from "queenjs/framework";

import { Utils } from "queen3d";
const osg = Utils.osg;

const Canvas3d = defineComponent({
  props: {
    pack: object<any>(),
  },
  emits: ["init"],
  setup(props, { emit }) {
    const state = reactive({ loaded: false });
    const { pack } = useCtx();
    pack.state.showLoading = false;

    const hooks = useScenePackPreview(props.pack, "1", {
      onPackLoaded: () => {
        const app = pack.queen3d.getAppInstance();
        if (!app) return;

        // app.setNoZoom(true);
        app.setNoPan(true);

        app.getFeaturesManager()?.enableGizmo(false);
        pack.queen3d.setControllerZoom(0.5, 7);
        let target = osg.vec3.create();
        pack.queen3d.getControllerTarget(target);
        target[0] = 0;
        target[1] = 0;
        console.log(target);
        pack.queen3d.setControllerTarget(target);

        pack.queen3d.picker.enable = false;
        pack.queen3d.redraw();
        state.loaded = true;
        emit("init", true);
      },
      backgroundTransparent: true,
    });

    return () => (
      <canvas
        ref={hooks.canvasRef as any}
        class={`${CanvasStyle} ${state.loaded ? "loaded" : null}`}
      />
    );
  },
});

export default defineComponent({
  setup(props) {
    const query = getQuery();
    const meshId = query.id;
    const dialogId = query.dialogid;
    const packRef = ref();
    const state = reactive({ loaded: false, loading: true });
    const { list } = useCtx();
    onMounted(async () => {
      packRef.value = await list.actions.loadPack3d({ meshId: meshId } as any);

      state.loaded = true;
      document.addEventListener("mousedown", () => {
        window.parent.postMessage(JSON.stringify({ type: "start", dialogId }));
      });
      document.addEventListener("touchstart", () => {
        window.parent.postMessage(JSON.stringify({ type: "start", dialogId }));
      });
      document.addEventListener("mouseup", () => {
        window.parent.postMessage(JSON.stringify({ type: "end", dialogId }));
      });
      document.addEventListener("touchend", () => {
        window.parent.postMessage(JSON.stringify({ type: "end", dialogId }));
      });
    });

    return () => (
      <>
        {state.loaded && (
          <Canvas3d
            pack={packRef.value}
            onInit={(v) => {
              state.loading = false;
            }}
          />
        )}
        {state.loading && (
          <Spin
            class={loadingStyle}
            indicator={
              <LoadingOutlined style={{ fontSize: "40px", color: "#fff" }} />
            }
          />
        )}
      </>
    );
  },
});

const rootStyle = css`
  padding: 30px;
  background-color: red;
`;

const loadingStyle = css`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`;
const CanvasStyle = css`
  width: 100%;
  height: 100%;
  visibility: hidden;
  &.loaded {
    visibility: inherit;
  }
`;
