<template>
  <div class="menu-item">
    <ElCollapse
      v-if="isToggle"
      v-model="activeNames"
      @change="onToggle"
    >
      <ElCollapseItem
        name="item"
      >
        <div
          slot="title"
          :class="[
            'inner',
            type,
            { 'is-toggle' : isToggle },
            { 'disabled' : disabled }
          ]"
          @mouseover="hover = true"
          @mouseleave="hover = false"
        >
          <div
            class="title"
            v-text="title"
          />

          <icon
            name="chevron-down"
            :class="[
              'chevron-down',
              { 'open': localIsOpen }
            ]"
          />
        </div>
        <div class="contents">
          <slot />
        </div>
      </ElCollapseItem>
    </ElCollapse>

    <RouterLink
      v-else
      data-test="hamburger menu navigation"
      v-bind="{
        class: [
          'inner',
          type,
          { 'link': !disabled },
          { 'is-toggle': isToggle },
          { 'disabled': disabled },
          { 'hover': hover },
        ],
        disabled,
        event: '', // disabling this to move logic to closeHamburgerMenu
        to,
      }"
      @click.native="closeHamburgerMenu"
    >
      <div
        class="title"
        v-text="title"
      />

      <icon
        v-if="icon"
        :name="icon"
        :class="icon"
      />

      <TfBadge
        v-if="badgeCount"
        :value="badgeCount"
        status="error"
        is-counter
      />
    </RouterLink>
  </div>
</template>

<script>
  /**
   * Hamburger Menu Toggle
   *
   * @vuedoc
   * @exports MenuToggle
   * @category Components
   */
  export default {
    name: 'MenuBarItem',

    inject: {
      menu: {
        default: {
          /**
           * Dummy method in case nothing is provided
           */
          closeHamburgerMenu() { },
        },
      },
    },

    props: {
      title: {
        type: String,
        required: true,
      },

      type: {
        type: String,
        default: 'grandchild',
      },

      to: {
        type: [Object, String],
        default: () => ({}),
      },

      isToggle: {
        type: Boolean,
        default: false,
      },

      disabled: {
        type: Boolean,
        default: false,
      },

      isOpen: {
        type: Boolean,
        default: false,
      },

      badgeCount: {
        type: Number,
        default: 0,
      },
      icon: {
        type: String,
        default: '',
      },
    },

    data: () => ({
      localIsOpen: false,
      activeNames: [],
      hover: false,
    }),

    created() {
      this.localIsOpen = this.isOpen;

      if (this.isOpen) {
        this.$set(this, 'activeNames', ['item']);
      }
    },

    methods: {
      /**
       * Track open/closed state locally to show correct toggle chevron
       */
      onToggle() {
        this.localIsOpen = !this.localIsOpen;
      },

      /**
       * Close the parent menu and then route to the required path as defined in the to object that was passed as a prop.
       */
      closeHamburgerMenu() {
        if (this.disabled) {
          return;
        }
        this.menu.closeHamburgerMenu();
        this.$router.push(this.to);
      },
    },
  };
</script>

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

  .inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    padding: 0 15px 0 30px;
    line-height: 40px;
    font-size: 14px;
    box-shadow: inset 0 -1px 0 0 $tf-extra-light-gray-1;

    &.link {
      color: $tf-dark-gray;
      font-weight: 400;
    }

    &.parent {
      padding-left: 15px;
      font-size: 16px;
      font-weight: 700;
    }

    &.child {
      padding-left: 20px;
      font-weight: 600;
    }

    &.grandchild {
      padding-left: 30px;
      background: $tf-extra-light-gray-2;
    }

    &.parent,
    &.child,
    &.grandchild {
      &:focus, &.router-link-exact-active:not(.disabled) {
        background: $tf-blue;
        color: $tf-white;

        svg {
          fill: $tf-white;
        }
      }
    }

    &.is-toggle {
      cursor: pointer;
    }

    &.disabled {
      color: $tf-medium-gray;
      cursor: not-allowed;

      &.grandchild {
        background-color: $tf-extra-light-gray-2;
      }

      &:hover, &:active, &:focus {
        background-color: $tf-white;
        box-shadow: inset 0 -1px 0 0 $tf-extra-light-gray-1;
        color: $tf-medium-gray;

        &.grandchild {
          background-color: $tf-extra-light-gray-2;
        }
      }
    }

    .title {
      flex-grow: 1;
    }

    .fa-icon {
      fill: $tf-dark-gray;
    }

    .exclamation-triangle {
      fill: $tf-orange;
    }

    .chevron-down {
      transition: transform .5s, color .5s cubic-bezier(.645, .045, .355, 1);
      transform-origin: center;
      transform: rotate(0deg);

      &.open {
        transform: rotate(180deg);
      }
    }
  }

  .el-collapse {
    box-shadow: inset 0 -1px 0 0 $tf-extra-light-gray-1;
  }

  .el-collapse-item__header {
    &.is-active:not(:focus) {
      > .parent,
      > .child {
        color: $tf-blue;
      }

      .chevron-down {
        fill: $tf-blue;
      }
    }
  }
</style>

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

  .menu-item .el-collapse-item__header:focus,
  .menu-item .link:focus {
    outline: none;
    box-shadow: inset 0 -1px 0 0 $tf-blue, inset 0 1px 0 0 $tf-blue;
    background: $tf-blue;
    color: $tf-white;

    svg {
      fill: $tf-white;
    }
  }

  .menu-item .el-collapse-item__header:hover:not(:focus):not(.router-link-exact-active),
  .menu-item .link:hover:not(:focus):not(.router-link-exact-active) {
    background: $tf-light-blue;
  }
</style>
