<template>
  <ul :class="[
    `${$classPrefix}-menu`,
    `${size}`
  ]" ref="menu">
    <slot />
  </ul>
</template>

<script>
export default {
  name: "IrbisMenu",

  props: {
    size: {
      type: String,
      default: "medium"
    },
    triggerGap: {
      type: Number,
      default: 0
    }
  },

  data() {
    return {
      isVisible: false
    };
  },

  methods: {
    toggle() {
      if (this.isVisible) {
        this.hide();
      } else {
        this.show();
      }
    },

    show() {
      let menu = this.$refs.menu;
      menu.classList.add("visible");
      this.isVisible = true;
      let selectRect = event.currentTarget.parentElement.getBoundingClientRect();
      let selectBottomPosition = Math.ceil(selectRect.top + selectRect.height);

      let windowHeight = window.innerHeight;
      if (selectBottomPosition + menu.offsetHeight > windowHeight) {
        menu.style.top = "unset";
        menu.style.bottom = selectRect.height + this.triggerGap + "px";
      } else {
        menu.style.bottom = "unset";
        menu.style.top = selectRect.height + this.triggerGap + "px";
      }
    },

    hide() {
      let menu = this.$refs.menu;
      menu.classList.remove("visible");
      this.isVisible = false;
    }
  }
};
</script>