<template>
  <div class="pt-5 pb-4 navigation-menu">
    <div v-for="(item, index) in listMenu" :key="index">
      <typo-text
        variant="heading-bold"
        @click="item.active = !item.active"
        :style="{color: item.active ? '#3e7dc0' : ''}"
        class="px-5 pt-4"
      >
        {{ item.title }}
        <base-icon
          :iconName="item.active ? 'expand_less' : 'expand_more'"
          class="ml-2"
          width="30"
          height="30"
          :color="item.active ? '#3e7dc0' : ''"
        />
      </typo-text>
      <div v-if="item.active">
        <div v-for="(data, index) in item.list.sort((a, b) => a.name > b.name)" :key="index">
          <router-link :to="data.url">
            <typo-text
              variant="heading-regular"
              :class="{'nav-active': $route.path == data.url}"
            >
              {{ data.name }}
            </typo-text>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  props: ["list"],
  components: {
    TypoText,
    BaseIcon
  },
  data() {
    return {
      listMenu: [
        {
          title: "Getting Started",
          active: true,
          list: [
            {
              name: "Installation",
              url: "/installation"
            },
            { 
              name: "CSS Class", 
              url: "/css" 
            },
            { 
              name: "Collor Pallete", 
              url: "/color-pallete" 
            },
          ]
        },
        {
          title: "UI Components",
          active: true,
          list: [
            { name: "Typography", url: "/typography" },
            { name: "Iconography", url: "/iconography" },
            { name: "Button", url: "/button" },
            { name: "Form Input", url: "/form-input" },
            { name: "Form Input Tag", url: "/form-input-tag" },
            { name: "Form Textarea", url: "/form-textarea" },
            { name: "Form Checkbox", url: "/form-checkbox" },
            { name: "Form Radio", url: "/form-radio" },
            { name: "Form Switch", url: "/form-switch" },
            { name: "Dropdown", url: "/dropdown" },
            { name: "Table", url: "/table" },
            { name: "Datepicker", url: "/datepicker" },
            { name: "Snackbar", url: "/snackbar" },
            { name: "Modal Dialog", url: "/modal-dialog" },
            { name: "Tooltip", url: "/tooltip" },
            { name: "Tab Menu", url: "/tab-menu" },
            { name: "Header", url: "/header" },
            { name: "Footer", url: "/footer" },
            { name: "Side Nav", url: "/side-nav" },
            { name: "Stepper", url: "/stepper" },
            { name: "Breadcrumbs", url: "/breadcrumbs" },
            { name: "Expansion Panel", url: "/expansion-panel" },
          ]
        }
      ]
    }
  },
  mounted() {
    this.sortList()
  },
  methods: {
    sortList() {
      this.listMenu[1].list.sort((a, b) => {
        let fa = a.name,
          fb = b.name;
        if (fa < fb) {
          return -1;
        }
        if (fa > fb) {
          return 1;
        }
        return 0;
      })
    }
  },
}
</script>

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

  .navigation-menu {
    border-right: 1px solid #e4e4e4;
    max-height: calc(100vh - 102px);
    overflow: auto;

    .heading-regular {
      margin: 0px;
      padding: 8px 40px;
    }

    .heading-bold {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin: 0px;
      
    }

    .title-bold {
      margin: 0px;
    }

    .nav-active {
      color: $clear-blue-5;
      background: $clear-blue-1;
    }
  }
</style>