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

      <!-- Collapse Menu -->
      <div 
        v-if="!dashboardName"
        class="collapse"
        :class="{ closed: !menuOpen }"
        @click="menuOpen = !menuOpen"
      >
        <base-icon
          iconName="navigate_before"
          color="#383E45"
        />
      </div>

      <!-- Dynamic Menu Structure -->
      <template 
        v-for="(menu, i) in menuStructure"
        :key="i"
      >
        <!-- Group Title -->
        <typo-text
          v-if="menuOpen"
          variant="caption-bold"
          class="px-2 pt-2 pb-1 ml-2 flex"
        >
          {{ menu.groupTitle }}
        </typo-text>
        <hr class="my-3" v-else />

        <!-- Group Menu -->
        <div
          v-for="(data, index) in menu.groupMenu"
          :key="index"
          :id="data.slug"
          class="flex flex-col"
          :class="{ disabled: !data.active }"
        >
          <div 
            class="flex items-center item-side-nav"
            :class="{ 'bg-active': activeSideNav == data.slug }"
            @click="toggleCollapse(data), clickNav(data)"
          >
            <base-icon :iconName="data.iconName ? data.iconName : data.slug" />
            <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 
              v-if="data.children.length > 0 && menuOpen"
              class="arrow-child">
              <base-icon
                v-if="!data.isCollapse"
                iconName="expand_more"
                color="#DDDDDD"
              />
              <base-icon
                v-else
                iconName="chevron_right"
                color="#DDDDDD"
              />
            </div>
          </div>

          <!-- Sub-menu Children -->
          <div 
            v-if="menuOpen"
            class="sub-child"
            :style="{
              height: data.isCollapse ? `${data.children.length * 50}px` : '0px',
              opacity: data.isCollapse ? '1' : '0'
            }"
          >
            <div 
              v-for="(child, index) in data.children"
              :key="index"
              :class="{ childActive: activeSideNav == data.slug, 'bg-active': activeSideNav == data.slug }"
              class="flex items-center item-side-nav"
              @click="clickNav(child)"
            >
              <typo-text 
                variant="body-1-regular"
                class="ml-8"
              >
                {{ child.label }}
              </typo-text>
              <div 
                v-if="child.desc"
                class="library-tooltip" :data-title="child.desc">
                <base-icon
                  class="ml-2 mt-1"
                  width="16"
                  height="16"
                  iconName="info_outline"
                  color="#383E45"
                />
              </div>
            </div>
          </div>
        </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],
    },
    iconDashboard: {
      type: [String],
    },
    colorIconDashboard: {
      type: [String],
    },
    dashboardName: {
      type: [String],
    },
  },
  data(){
    return {
      menuOpen: true,
      menuStructure: [],
    }
  },
  watch: {
    list: {
      handler: function(val) {
        this.setMenuStructure()
      },
      deep: true
    }
  },
  mounted(){
    this.setMenuStructure()
  },
  methods: {
    toggleCollapse(menuItem) {
      menuItem.isCollapse = !menuItem.isCollapse;
    },
    setMenuStructure() {
      // Ensure `list` and `list.children` exist
      if (this.list) {
        this.menuStructure = this.list.map((menu) => {
          return {
            groupTitle: menu.groupName,
            groupMenu: menu.children.map((child) => ({
              slug: child.slug,
              label: child.label,
              isCollapse: false,
              active: child.active,
              iconName: child.iconName,
              children: Array.isArray(child.children)
                ? child.children.map((subChild) => ({
                    label: subChild.label,
                    slug: subChild.slug,
                    active: subChild.active,
                    desc: subChild.desc,
                    children: []
                  }))
                : [], // Jika tidak ada children, set sebagai array kosong
            })),
          };
        });

      } else {
        console.warn("List or children is undefined!");
      }
    },
    clickNav(data) {
      let obj
      if(data == 'dashboard') {
        obj = {
          value: data,
          active: true,
          label: '',
          iconName: ''
        }
      } else if (data.children.length <= 0) {
        obj = {
          value: data.slug,
          active: data.active,
          label: data.label,
          iconName: data.iconName
        }
      }

      if (obj) {
        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;
  }

  .arrow-child {
    position: absolute;
    right: 10px;
  }

  .sub-child {
    overflow: visible;
    transition: all .3s;
    height: 0px;
    opacity: 0;
  }

  .childActive {
    background: #f1f6fb;
  }

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

    &.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>
