<!--
  Program: Bread crumb
  Author: SDL
  Brief: Components that visually show where the current user is
-->
<template>
  <div class="ui--content-heading">
    <strong>
      {{ title }}
      <a href="javascript:"
         data-bs-toggle="tooltip"
         data-bs-placement="bottom"
         :data-bs-original-title="tooltipMessage"
         class="ui--addfavor"
         :class="[ isUserMenu ? 'on': 'off' ]"
         @click="isUserMenu ? deleteMyMenu(menu.menuId) : addMyMenu(menu.menuId)"
      >
        <i class="bi bi-star-fill"></i>
      </a>
    </strong>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb float-end">
        <li class="breadcrumb-item" v-if="home">
          <router-link :to="{ name: 'mainIndexPage' }">{{ homeText }} </router-link>
        </li>
        <li
          class="breadcrumb-item"
          :class="{ active: index === list.length - 1 }"
          v-for="(item, index) in list"
          :key="item.menuId"
        >
          <a>{{ getLabel(item) }}</a>
          <!-- <a :href="'' !== item.menuUrl && item.menuUrl ? item.menuUrl : 'javascript:'">{{item.localeLabel}}</a> -->
          <!-- <router-link v-if="index === list.length - 1" :to="item.menuUrl" tag="span">{{item.localeLabel}}</router-link>
          <a :href="'' !== item.menuUrl && item.menuUrl ? item.menuUrl : 'javascript:'" v-else>{{item.localeLabel}}</a> -->
        </li>

        <!-- <li class="breadcrumb-item"><a href="#">Menu1</a></li>
        <li class="breadcrumb-item"><a href="#">Submenu1</a></li>
        <li class="breadcrumb-item active" aria-current="page">Submenu1-1</li> -->
      </ol>
    </nav>
  </div>
</template>

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

export default {
  name: 'Breadcrumb',
  mixins: [SDLLocale],
  props: {
    home: {
      required: false,
      type: Boolean,
      default: false,
    },
    homeText: {
      required: false,
      type: String,
      default: 'Home',
    },
  },
  data() {
    return {
      title: '',
      list: [],
      isUserMenu: false,
    };
  },
  computed: {
    ...mapGetters({
      menus: 'getMenus',
      myMenus: 'getMyMenus',
    }),
    menu() {
      return _.find(this.menus, ['menuId', this.menuId]);
    },
    menuId() {
      return this.$route.meta.menuId;
    },
    pageId() {
      return this.$route.meta.pageId;
    },
    tooltipMessage() {
      return this.isUserMenu ? 'Delete My Menu' : 'Add My Menu';
    }
  },
  watch: {
    menus: {
      handler() {
        this.setTitle();
        this.setBreadcrumb();
      },
      deep: true
    },
    myMenus: {
      handler() {
        this.setTitle();
        this.setBreadcrumb();
      },
      deep: true
    },
    locale: {
      handler() {
        this.setTitle();
        this.setBreadcrumb();
      },
      deep: true
    },
    $route: {
      handler() {
        this.setTitle();
        this.setBreadcrumb();
      },
      deep: true
    },
  },
  methods: {
    ...mapActions(['addMyMenu', 'deleteMyMenu']),
    getParentMenu(parentId) {
      return this.menus.find(item => item.menuId === parentId);
    },
    setTitle() {
      if (this.menu) {
        this.title = this.getLabel(this.menu);
        // this.title = this.menu.localeLabel;

        this.isUserMenu = this.myMenus.some(myMenu => myMenu.menuId === this.menu.menuId);
      }
    },
    setBreadcrumb() {
      if (this.menu) {
        this.list = [this.menu];
        for (let i = this.menu.menuLevel - 1; i > 0; i -= 1) {
          const parentMenu = this.getParentMenu(this.list[0].parentId);
          if (parentMenu) {
            this.list = [parentMenu, ...this.list];
          }
        }
      }
    },
  },
  created() {
    this.setTitle();
    this.setBreadcrumb();
  },
  mounted() {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(
        tooltipTriggerEl,
        {
          trigger: 'hover',
        }
    ));
  },
};
</script>

<style scoped></style>
