<template>
  <button
    :class="className"
    type="button"
    :aria-label="computedButtonLabel"
    :aria-expanded="calculatedExpansion"
    @click="toggle"
  >
    <!-- eslint-disable-next-line vue/no-v-html -->
    <span v-if="calcBefore" v-html="calcBefore" />
    <component :is="icon" :modifiers="iconModifiers" />
    <!-- eslint-disable-next-line vue/no-v-html -->
    <span v-if="calcAfter" v-html="calcAfter" />
  </button>
</template>

<script>
import IconChevronDown from '@mindful-web/marko-web-icons/browser/chevron-down.vue';
import IconChevronUp from '@mindful-web/marko-web-icons/browser/chevron-up.vue';
import IconChevronRight from '@mindful-web/marko-web-icons/browser/chevron-right.vue';
import IconDash from '@mindful-web/marko-web-icons/browser/dash.vue';
import IconMail from '@mindful-web/marko-web-icons/browser/mail.vue';
import IconPlus from '@mindful-web/marko-web-icons/browser/plus.vue';
import IconThreeBars from '@mindful-web/marko-web-icons/browser/three-bars.vue';
import IconX from '@mindful-web/marko-web-icons/browser/x.vue';
import EventBus from '@mindful-web/marko-web/browser/event-bus';

const validateIcon = (v) => ['chevron-down', 'chevron-up', 'chevron-right', 'dash', 'mail', 'plus', 'three-bars', 'x'].includes(v);

export default {
  components: {
    IconChevronDown,
    IconChevronUp,
    IconChevronRight,
    IconDash,
    IconMail,
    IconPlus,
    IconThreeBars,
    IconX,
  },
  props: {
    className: {
      type: String,
      default: null,
    },
    initiallyExpanded: {
      type: Boolean,
      default: false,
    },
    targets: {
      type: Array,
      default: () => [],
    },
    toggleClass: {
      type: String,
      required: true,
    },
    iconModifiers: {
      type: Array,
      default: () => [],
    },
    buttonLabel: {
      type: String,
      default: 'Menu',
    },
    iconName: {
      type: String,
      default: 'three-bars',
      validator: validateIcon,
    },
    expandedIconName: {
      type: String,
      default: 'x',
      validator: validateIcon,
    },
    before: {
      type: String,
      default: null,
    },
    beforeExpanded: {
      type: String,
      default: null,
    },
    beforeCollapsed: {
      type: String,
      default: null,
    },
    after: {
      type: String,
      default: null,
    },
    afterExpanded: {
      type: String,
      default: null,
    },
    afterCollapsed: {
      type: String,
      default: null,
    },
  },
  data: () => ({
    expanded: false,
  }),
  computed: {
    computedButtonLabel() {
      if (this.calcBefore) return this.calcBefore;
      if (this.calcAfter) return this.calcAfter;
      return this.buttonLabel;
    },
    calcBefore() {
      const {
        before,
        beforeExpanded,
        beforeCollapsed,
        expanded,
      } = this;
      if (expanded && beforeExpanded) return beforeExpanded;
      if (!expanded && beforeCollapsed) return beforeCollapsed;
      return before;
    },
    calcAfter() {
      const {
        after,
        afterExpanded,
        afterCollapsed,
        expanded,
      } = this;
      if (expanded && afterExpanded) return afterExpanded;
      if (!expanded && afterCollapsed) return afterCollapsed;
      return after;
    },
    icon() {
      if (this.expanded) return `icon-${this.expandedIconName}`;
      return `icon-${this.iconName}`;
    },
    calculatedExpansion() {
      if (this.expanded) return 'true';
      return 'false';
    },
  },
  created() {
    this.expanded = this.initiallyExpanded;
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
      EventBus.$emit('site-menu-expanded', this.expanded);
      const elements = document.querySelectorAll(this.targets.join(','));
      Array.prototype.forEach.call(elements, (el) => el.classList.toggle(this.toggleClass));
    },
  },
};
</script>
