<!--
A simplified dropdown component that doesn't rely on buttons as toggles  like bootstrap-vue
-->

<template lang="pug">
.habitica-menu-dropdown.dropdown(@click="toggleDropdown()", @keypress.enter.space.stop.prevent="toggleDropdown()", role="button", tabindex="0", :class="{open: isOpen}", :aria-pressed="isPressed")
  .habitica-menu-dropdown-toggle
    slot(name="dropdown-toggle")
  .dropdown-menu(:class="{'dropdown-menu-right': right}")
    slot(name="dropdown-content")
</template>

<style lang="scss">
@import '~client/assets/scss/colors.scss';
.habitica-menu-dropdown {
  &:hover,
  &:focus { // NB focus styles match the hover styles for .svg-icon
    outline: none;
  }
}

.habitica-menu-dropdown.open {
  .habitica-menu-dropdown-toggle .svg-icon {
    color: $white !important;
  }
}

// Firefox outline fix for dropdown menu
@supports (-moz-appearance:meterbar) and (all:initial) {
  .habitica-menu-dropdown.open {
    &:focus {
      outline: none;
    }
  }
}
</style>
<style lang='scss' scoped>
@import '~client/assets/scss/colors.scss';

.dropdown {
  &:hover {
    cursor: pointer;
  }

  .dropdown-menu {
    cursor: auto;
    box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
    max-height: calc(100vh - 100px);
    overflow: auto;
    left: inherit;
    right: 0px !important;

    /deep/ .dropdown-separated {
      border-bottom: 1px solid $gray-500;
    }
  }

  &.open {
    .dropdown-menu {
      display: block;
      margin-top: 8px;
    }
  }
}
</style>

<script>
export default {
  props: {
    right: Boolean,
    openStatus: Number,
  },
  data () {
    return {
      isDropdownOpen: false,
    };
  },
  computed: {
    isOpen () {
      // Open status is a number so we can tell if the value was passed
      if (this.openStatus !== undefined) return this.openStatus === 1 ? true : false;
      return this.isDropdownOpen;
    },
    isPressed () {
      return this.isOpen ? 'true' : 'false';
    },
  },
  mounted () {
    document.documentElement.addEventListener('click', this._clickOutListener);
  },
  destroyed () {
    document.removeEventListener('click', this._clickOutListener);
  },
  methods: {
    _clickOutListener (e) {
      if (!this.$el.contains(e.target) && this.isOpen) {
        this.toggleDropdown();
      }
    },
    toggleDropdown () {
      this.isDropdownOpen = !this.isOpen;
      this.$emit('toggled', this.isDropdownOpen);
    },
  },
};
</script>
