<template>
  <component
    @onmacrocall="onMacroCall"
    :macroList="computedMacroList"
    v-bind="$props"
    :is="view"
  ></component>
</template>
<script>
import { loadScript, isFunction, isPromise } from "@credenceanalytics/utilities";
import MacroFilterSection from "./views/macro-filter-section";
import MacroFormSection from "./views/macro-form-section";
import MacroNavigationSection from "./views/macro-navigation-section";
import MacroMenuOptions from "./views/macro-menu-options";
import { props, macroLoadPromise, macroLoadFlag } from "./views/props";

export default {
  name: "MacroComponent",
  components: {
    MacroFormSection,
    MacroFilterSection,
    MacroNavigationSection,
    MacroMenuOptions,
  },
  props: {
    ...props,
    view: {
      type: String,
      validator: function (value) {
        // The value must match one of these strings
        return (
          [
            "macro-form-section",
            "macro-filter-section",
            "macro-navigation-section",
            "macro-menu-options",
          ].indexOf(value) !== -1
        );
      },
      default: "macro-form-section",
    },
    route: {
      type: String,
      required: true,
    },
    reference: {
      type: String,
      default: "",
    },
    setTargetThisRefence: {
      type: Function,
    },
  },
  data() {
    return {
      list: [],
      macro: {},
    };
  },
  computed: {
    computedMacroList: {
      get() {
        return this.list;
      },
      set(arr) {
        this.list = arr;
      },
    },
  },
  methods: {
    onMacroCall(macroname) {
      if (isFunction(this.setTargetThisRefence)) {
        if (this.reference)
          return this.macro.call(macroname, this.setTargetThisRefence()(this.reference));
        return this.macro.call(macroname, this.setTargetThisRefence()());
      }
      return this.macro.call(macroname, this.$parent);
    },
  },
  created() {
    const _this = this;

    async function setup() {
      let list = window["_macro"].__cachedList || _this.macro.list();

      isPromise(list) &&
        (await list.then(function (res) {
          window["_macro"].__cachedList = res || [];
        }));

      list = window["_macro"].__cachedList;

      _this.$set(
        _this,
        "computedMacroList",
        (list || []).filter((item) => item.route == _this.route)
      );
    }

    loadScript(this.macroJSFileUrl)
      .then(function ({ initialize }) {
        if (initialize) {
          const macro = window["_macro"];
          macro.init(_this.appName);
          macroLoadFlag.resolve({ macro });
        }
      })
      .catch((error) => {
        console.error(error);
        macroLoadFlag.reject({ macro: [] });
      });

    macroLoadPromise
      .then(function ({ macro }) {
        _this.macro = macro;
        setup();
      })
      .catch(function (error) {
        console.log("computedMacroList error ", error);
        _this.$set(_this, "computedMacroList", []);
      });
  },
};
</script>
