// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksyTabBar = {
  name: "LinksyTabBar",
  props: {
    title: String,
    persist: Boolean,
    tab: {
      type: Number,
      default: 0,
    },
    tabs: {
      type: Array,
      default: [],
    },
  },
  watch: {
    tab: {
      handler(val) {
        if (this.persist) {
          const newHash = this.getId(this.tabs[val])
            .replace(/ /g, "-")
            .replace(/@/g, "")
            .replace(/\$/g, "")
            .replace(/!/g, "")
            .replace(/#/g, "")
            .toLowerCase();

          history.replaceState(null, null, "#" + newHash);
        }
      },
    },
  },
  computed: {
    currentTab: {
      get() {
        return this.tab;
      },
    },
  },
  methods: {
    getId(tab) {
      return typeof tab == "string" ? tab : tab.id;
    },
    getTitle(tab) {
      return typeof tab == "string" ? tab : tab.title;
    },
    onSelect(index) {
      this.$emit("onSelect", index);
    },
  },
  template: `
    <div class="linksy-tabbar tabbar">
        <h5 v-if="title">{{title}}</h5>
        <ul class="d-flex m-0">
            <li v-for="(tab, index) in tabs" :class="{ 'active': currentTab == index }" @click="onSelect(index)">
                <slot :tab="tab" :index="index" :active="currentTab == index">
                        <button class="rounded-0">{{getTitle(tab)}}</button>
                </slot>
            </li>
        </ul>
    </div>
  `,
  mounted() {
    if (this.persist) {
      const currentUrlArr = window.location.href.split("#");
      if (currentUrlArr.length > 1) {
        const currentTabUrl = currentUrlArr[1];

        for (let index = 0; index < this.tabs.length; index++) {
          const tab = this.tabs[index];
          if (
            currentTabUrl ==
            this.getId(tab)
              .replace(/ /g, "-")
              .replace(/@/g, "")
              .replace(/\$/g, "")
              .replace(/!/g, "")
              .replace(/#/g, "")
              .toLowerCase()
          ) {
            this.onSelect(index);
            break;
          }
        }
      }
    }

    this.$emit("onTabMounted");
  },
};
