<template>
  <div class="modal-content ui--sitemap-container">
    <!-- contents -->
    <div class="modal-header">
      <h5 class="modal-title h4">{{ $t('sdl.common.label.sitemap') }}</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="$emit('close');"></button>
    </div>
    <div class="modal-body">
      <template v-for="(row, index) in siteMapRows" :key="index">
        <div class="row">
          <div class="col-3" v-for="menu in getRootMenus(index)" :key="menu.menuId">
            <!-- 1depth -->
            <h3 class="ui--menu-title cursor-pointer" v-if="menu.externalUrlUsed === true" @click="openExternalUrl(menu.externalUrl)">{{ getLabel(menu) }} <i class="bi bi-arrow-up-right"></i></h3>
            <h3 class="ui--menu-title" v-else-if="menu.defaultPage">{{ getLabel(menu) }} <i class="bi bi-chevron-right"></i></h3>
            <h3 class="ui--menu-title" v-else>{{ getLabel(menu) }}</h3>
            <!--// 1depth -->
            <ul class="ui--menu-group">
              <li v-for="submenu in getSubmenu(menu.menuId)" :key="submenu.menuId">
                <!-- 2depth -->
                <strong v-if="submenu.externalUrlUsed === true" @click="openExternalUrl(submenu.externalUrl)" class="cursor-pointer"> {{ getLabel(submenu) }} <i class="bi bi-arrow-up-right"></i></strong>
                <strong v-else-if="submenu.defaultPage" @click="moveMenu(submenu.defaultPage.pagePath)" class="cursor-pointer"> {{ getLabel(submenu) }} <i class="bi bi-chevron-right"></i></strong>
                <strong v-else>{{ getLabel(submenu) }}</strong>
                <!--// 2depth -->
                <ul class="ui--menu-list">
                  <li v-for="item in getSubmenu(submenu.menuId)" :key="item.menuId">
                    <div v-if="item.externalUrlUsed === true">
                      <a href="javascript:" @click="openExternalUrl(item.externalUrl)">
                        {{ getLabel(item) }}
                      </a>
                      <i class="bi bi-arrow-up-right"></i>
                    </div>

                    <a v-else href="javascript:" @click="moveMenu(item.menuUrl)">{{ getLabel(item) }}</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
        <hr class="mb-5 border-0" />
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import store from '@/vuex/store';
import SDLLocale from '@/mixin/SDLLocale';
import _ from "lodash";

export default {
  mixins: [SDLLocale],
  data() {
    return {
      test: 0,
    };
  },
  computed: {
    ...mapGetters({
      menus: 'getMenus', // Receive menus with getter
    }),
    rootMenus() {
      return _.sortBy(
          this.menus.filter(menu => menu.menuLevel === 1 && menu.menuId !== 'COMM_URL'),
          ['menuSequence'],
      ); // Excluding standard platform menu exposure
    },
    siteMapRows() {
      return Math.ceil(this.rootMenus.length / 4);
    },
  },
  methods: {
    getRootMenus(idx) {
      const result = [];
      for (let i = idx * 4, nMax = idx * 4 + 4; i < nMax; i += 1) {
        if (this.rootMenus[i] === undefined) {
          break;
        }
        result.push(this.rootMenus[i]);
      }
      return result;
    },
    getSubmenu(parentId) {
      return _.sortBy(
          this.menus.filter(menu => menu.parentId === parentId),
          ['menuSequence'],
      );
    },
    moveMenu(pagePath) {
      // Initialize saved parameters when forced to move from the menu
      store.commit('PARAMS', {});
      this.$router.push({ path: pagePath });
      // If the moving component is the same, refresh is required
      const fromComponentName = this.$route.meta.componentName;
      const toMenu = _.find(this.menus, ['menuUrl', pagePath]);
      if (fromComponentName === toMenu.componentName) {
        this.$emit('router-reload');
      }
    },
    openExternalUrl(url) {
      window.open(url.startsWith('http') ? url : `http://${url}`, '_blank');
    },
  },
};
</script>