<template>
  <div 
    class="side-nav"
    :class="{ open: menuOpen}" 
    >
    <div class="relative">
      <div
        class="flex items-center item-side-nav"
        @click="clickNav('dashboard')"
      >
        <div v-if="activeSideNav == 'dashboard'" class="bg-active" />
        <base-icon
          iconName="home"
          color="#3e7dc0"
        />
        <typo-text 
          v-if="menuOpen"
          class="ml-2"
          :variant="activeSideNav == 'dashboard' ? `body-1-bold` : `body-1-regular`">
          Dashboard
        </typo-text>
      </div>

      <div 
        class="collapse" 
        :class="{ closed: !menuOpen}" 
        @click="menuOpen = !menuOpen"
      >
        <base-icon
          iconName="navigate_before"
          color="#383E45"
        />
      </div>
      <template 
        v-for="(menu, i) in list"
        :key="i"
      >
        <typo-text
          v-if="menuOpen"
          variant="caption-bold"
          class="px-2 pt-2 pb-1 ml-2 flex"
        >
          {{menu.groupName}}
        </typo-text>
        <hr class="my-3" v-else />

        <div
          v-for="(data, index) in menu.children"
          :key="index"
          :id="data.slug"
          class="flex items-center item-side-nav"
          :class="{ disabled: !data.active }"
          @click="clickNav(data)"
        >
          <div v-if="activeSideNav == data.slug" class="bg-active" />
          <base-icon :iconName="data.iconName" />
          <typo-text 
            v-if="menuOpen"
            class="ml-2"
            :variant="activeSideNav == data.slug ? `body-1-bold` : `body-1-regular`"
          >
            {{ data.label }} 
            <span v-if="data.slug == 'ematerai'" class="label-new">NEW !</span>
          </typo-text>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";

export default {
  components: {
    BaseIcon,
    TypoText,
  },
  props: {
    activeSideNav: {
      type: [String],
    },
    subHeaderMenu: {
      type: [String],
    },
    list: {
      type: [Array],
    },
  },
  data(){
    return {
      menuOpen: true
    }
  },
  methods: {
    clickNav(data) {
      let obj
      if(data == 'dashboard') {
        obj = {
          value: data,
          active: true,
          label: '',
          iconName: ''
        }
      } else {
        obj = {
          value: data.slug,
          active: data.active,
          label: data.label,
          iconName: data.iconName
        }
      }
      this.$emit('actionMenu', obj)
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.side-nav {
  background: $neutral-0;
  padding: 12px 0;
  width: 55px;
  &.open {
    width: 225px;
  }

  .collapse {
    cursor: pointer;
    height: 24px;
    width: 24px;
    background: #FFFFFF;
    border-radius: 25px;
    position: absolute;
    right: -13px;
    top: 10px;
    box-shadow: 0 1px 8px #e4e4e4;
    z-index: 1;

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

  .bg-active {
    background: $dark-blue-1;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: -1;
    width: -webkit-fill-available;
    border-left: 4px solid $dark-blue-4;
  }

  .item-side-nav {
    padding: 0 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    height: 50px;

    &.disabled {
      cursor: not-allowed;
      filter: grayscale(100%);
    }

    .label-new {
      display: inline;
      padding: 2px 5px;
      margin-left: 3px;
      background: #B7E5F6;
      border-radius: 2px;
      font-weight: bold;
      color: #095571;
    }
  }

  .body-1-regular {
    line-height: normal;
  }

  .caption-bold {
    color: $neutral-3;
    position: relative;
    z-index: 1;
    line-height: 156%;
  }
}
</style>
