<template>
  <div ref="container"></div>
</template>
<script lang="ts">
import VanillaGuides, {
  PROPERTIES,
  METHODS,
  GuidesOptions,
  EVENTS,
} from "@scena/guides";
import { isUndefined } from "@daybrush/utils";
import { VueGuidesInterface } from "./types";

const VUE_PROPERTIES = [...PROPERTIES];

VUE_PROPERTIES.splice(VUE_PROPERTIES.indexOf("style"), 1);
const methods: Record<string, any> = {};
const watch: Record<string, any> = {};

VUE_PROPERTIES.forEach((name) => {
  watch[name] = function (this: VueGuidesInterface, value: any) {
    (this.$_guides as any)[name] = value;
  };
});

watch.vueStyle = function (this: VueGuidesInterface, value: any) {
  (this.$_guides as any).style = value;
};

METHODS.forEach((name) => {
  methods[name] = function (this: VueGuidesInterface, ...args: any[]) {
    return (this.$_guides as any)[name](...args);
  };
});

export default {
  name: "guides",
  methods,
  watch,
  props: [...VUE_PROPERTIES, "vueStyle"],
  mounted(this: VueGuidesInterface) {
    const options: Partial<GuidesOptions> = {};
    const props = this.$props;
    VUE_PROPERTIES.forEach((name) => {
      const value = props[name];

      if (!isUndefined(value)) {
        (options as any)[name] = props[name];
      }
    });
    const refs = this.$refs;
    const container = refs.container as HTMLElement;

    options.style = props.vueStyle;
    options.warpSelf = true;

    this.$_guides = new VanillaGuides(container, options);

    const guides = this.$_guides;

    EVENTS.forEach((name) => {
      (guides as any).on(name, (e: any) => {
        this.$emit(name, { ...e });
      });
    });
  },
  beforeUnmount(this: VueGuidesInterface) {
    this.$_guides.destroy();
  },
};
</script>
