<template>
  <TfSubmenu
    ref="hamburger-menu"
    :popper-append-to-body="false"
    :close-on-outside-click="true"
    index="1"
    popper-class="tf-hamburger-popper"
    :class="['tf-hamburger wt-hamburger', mode]"
    @hide="hideSubmenu"
  >
    <template slot="title">
      <span>Menu</span>
      <TfBadge
        v-if="badgeCount > 0"
        :value="badgeCount"
        status="error"
        is-counter
      />
    </template>
    <slot />
  </TfSubmenu>
</template>
<script>
  export default {
    name: 'TfHamburgerMenu',
    props: {
      badgeCount: {
        type: Number,
        default: 0,
      },
      mode: {
        type: String,
        default: 'carrier',
      },
    },
    mounted() {
      // Adding key listeners to the hamburger menu and menu items so that we can tab to them and hit enter
      this.$refs['hamburger-menu'].$el.addEventListener('keydown', this.checkHamburgerKeyEvent);

      // TODO RI 2021-02-03 can we do this with a nexttick?
      window.setTimeout(() => {
        const menuItems = this.$el.querySelectorAll('.tf-hamburger-popper .el-menu-item');
        if (menuItems.length) {
          for (let i = 0; i < menuItems.length; i += 1) {
            menuItems[i].addEventListener('keydown', this.clickMenuItem);
          }
        }
      }, 500);
    },
    beforeDestroy() {
      // Removing previously added key listeners
      this.$refs['hamburger-menu'].$el.removeEventListener('keydown', this.checkHamburgerKeyEvent);

      const menuItems = this.$el.querySelectorAll('.el-menu-item');
      if (menuItems.length) {
        for (let i = 0; i < menuItems.length; i += 1) {
          menuItems[i].removeEventListener('keydown', this.clickMenuItem);
        }
      }
    },
    methods: {
      /**
       * Click the hamburger menu if a user hits enter while focused on it
       */
      hideSubmenu() {
        this.$emit('hide');
      },
      /**
       * Click the hamburger menu if a user hits enter while focused on it
       *
       * @param {event} e
       */
      checkHamburgerKeyEvent(e) {
        const key = e.which || e.keyCode;
        if (key === 13) { // 13 is enter
          this.$refs['hamburger-menu'].$el.querySelector('.el-submenu__title').click();
        }
      },
      /**
       * Click the menu item if a user hits enter while focused on it
       *
       * @param {event} e
       */
      clickMenuItem(e) {
        const key = e.which || e.keyCode;
        if (key === 13) { // 13 is enter
          e.target.click();
        } else if (key === 27) { // if they hit escape close the menu
          this.$refs['hamburger-menu'].$el.querySelector('.el-submenu__title').click();
        }
      },
    },
  };
</script>

<style lang="scss">
  @import 'src/assets/styles/variables';
  @import 'src/assets/styles/mixins';

  /* stylelint-disable selector-max-compound-selectors  */
  .el-menu--horizontal {
    > .el-submenu.tf-hamburger,
    > .el-submenu.wt-hamburger {
      float: right;
      width: fit-content; // fix for safari, will not affect other browser (i.e. IE)

      .el-submenu__title {
        // neccessary because of scoped styles in element overriding these
        /* stylelint-disable declaration-no-important  */
        border: 1px transparent solid !important;
        /* stylelint-enable declaration-no-important  */
        height: 53px;
        line-height: 53px;
        width: 73px;
        padding: 0;
        position: relative;
        overflow: hidden;
        background-color: $tf-white;
        background-position: center center;
        background-repeat: no-repeat;
        @include hamburger-image($tf-blue);
        background-size: 25px 18px;

        &:hover {
          /* stylelint-disable declaration-no-important  */
          border: 1px $tf-blue solid !important;
          /* stylelint-enable declaration-no-important  */
        }

        span:not(.tf-badge) {
          position: absolute;
          left: -100px;
        }

        .tf-badge {
          position: absolute;
          right: 37px;
          top: 5px;
        }
      }

      i {
        display: none;
      }

      &.is-opened {
        .el-submenu__title:hover,
        .el-submenu__title {
          background-color: $tf-blue;
          @include hamburger-image($tf-white);
        }
      }

      &.legacy {
        /* stylelint-disable max-nesting-depth  */
        .el-submenu__title {
          background-color: $tf-blue;
          @include hamburger-image($tf-white);

          &:hover {
            @include hamburger-image($tf-light-gray);
          }
        }

        &.is-opened {
          .el-submenu__title:hover,
          .el-submenu__title {
            background-color: $tf-dark-blue;
            @include hamburger-image($tf-white);
          }
        }
        /* stylelint-enable max-nesting-depth  */
      }
    }
  }

  /* stylelint-enable selector-max-compound-selectors  */
  .el-menu--horizontal.tf-hamburger-popper,
  .el-menu--horizontal.wt-hamburger-popper {
    /* stylelint-disable declaration-no-important  */
    top: 55px !important;
    left: auto !important;
    /* stylelint-enable declaration-no-important  */
    border-radius: 3px;
    right: 0;

    .el-menu--popup-bottom-start {
      margin-top: 0;
    }

    .el-menu--popup {
      border-radius: 3px;
      border: 1px $tf-blue solid;

      padding: 0;
      left: auto;
      right: 0;

      .el-menu-item {
        font-size: 16px;
        font-weight: 600;
        color: $tf-dark-gray;
        height: 39px;
        line-height: 39px;
        border-top: 1px $tf-light-gray solid;

        &:focus {
          color: $tf-blue;
        }

        &:first-of-type,
        &.sub-page {
          border-top: 1px $tf-white solid;
        }
      }

      .el-menu-item.sub-page {
        font-weight: normal;
      }

      .el-menu-item:hover {
        background: rgba($tf-blue, .1);
      }

      .el-menu-item.is-active {
        color: $tf-blue;
        background: rgba($tf-blue, .2);
      }
    }
  }
</style>
