<template >
  <ul id="credmegamenu">
    <b-nav-item-dropdown no-caret class="megamenu">
      <template #button-content>
        <b-icon-grid3x3-gap-fill class="icon d-none d-lg-inline" />
      </template>

      <b-dropdown-item
        class="no-event"
      >
        <img src="./scss/img/finance.webp" style="width: 100%; height: 100%" />
      </b-dropdown-item>
      <b-dropdown-item
        v-for="(item, index) in menuLists.menuList"
        :key="index"
        target="_blank"
        rel="opener"
        :href="'/' + item[keys.url]"
      >
        <div class="mm-icon-block">
          <div class="mm-icon" :class="'mm-' + item[keys.icon]"></div>
        </div>
        <h6>{{ item[keys.name] }}</h6>
      </b-dropdown-item>

      <li v-if="menuLists.loading" class="div_no_loading">
        Loading Menu List Please Wait...
      </li>

      <li
        v-if="!menuLists.loading && menuLists.length === 0"
        class="div_no_data_found"
      >
        No applications found
      </li>
    </b-nav-item-dropdown>
  </ul>
</template>
<script>
import {
  BNavItemDropdown,
  BIconGrid3x3GapFill,
  BDropdownItem,
} from "bootstrap-vue";
import {
  isPromise,
  isPlainArray,
  isFunction,
} from "@credenceanalytics/utilities";

let timeoutID = null;

export default {
  props: {
    menuList: {
      type: [Function, Array, Promise],
      default: function () {
        return [];
      },
    },
    keys: {
      type: Object,
      default() {
        return {
          url: "APP_PAGE",
          icon: "CLS_ICON",
          name: "APP_NAME"
        }
      }
    }
  },
  components: {
    BNavItemDropdown,
    BIconGrid3x3GapFill,
    BDropdownItem,
  },
  data() {
    return {
      menuLists: {
        menuList: [],
        loading: true,
        length: 0,
      },
    };
  },
  watch: {
    menuList: {
      handler(newVal) {
        clearTimeout(timeoutID);
        timeoutID = setTimeout(
          function () {
            this.setMegaList(newVal);
          }.bind(this),
          500
        );
      },
      immediate: true,
    },
  },
  methods: {
    setMegaList(newVal) {
      if (isPromise(newVal)) {
        this.loading = true;
        return newVal.then(
          ((response) => this.assignArray(response)).bind(this),
          (() => this.assignArray([])).bind(this)
        );
      }
      if (isFunction(newVal)) {
        const RESULT = newVal();
        if (isPromise(RESULT)) {
          this.loading = true;
          return RESULT.then(
            ((response) => this.assignArray(response)).bind(this),
            (() => this.assignArray([])).bind(this)
          );
        }
        return this.assignArray(RESULT);
      }
      return this.assignArray(newVal);
    },
    assignArray(varray) {
      if (!isPlainArray(varray))
        throw new Error(
          "Oops `menuList` must be Array or can be Promise, Function which returns a array"
        );
      this.menuLists = Object.assign({}, this.menuLists, {
        menuList: varray,
        loading: false,
        length: varray.length,
      });
    },
  },
};
</script>

<style lang="scss" src="./scss/_megamenu.scss"></style>
