<!--
 This file is part of the Meeds project (https://meeds.io/).
 
 Copyright (C) 2020 - 2022 Meeds Association contact@meeds.io
 
 This program is free software; you can redistribute it and/or
 modify it under the terms of the GNU Lesser General Public
 License as published by the Free Software Foundation; either
 version 3 of the License, or (at your option) any later version.
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 Lesser General Public License for more details.
 
 You should have received a copy of the GNU Lesser General Public License
 along with this program; if not, write to the Free Software Foundation,
 Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
-->
<template>
  <v-flex>
    <v-tabs v-model="selectedTab">
      <v-tab
        ref="tenants"
        href="tenants"
        link 
        class="px-0 me-2"
        @click="openPage('tenants', $event)">
        <span class="text-capitalize px-8">{{ $t('deeds.provisioning.management.tabs.tenants') }}</span>
      </v-tab>
      <v-tab
        ref="settings"
        href="settings"
        link 
        class="px-0 me-2"
        @click="openPage('settings', $event)">
        <span class="text-capitalize px-8">{{ $t('deeds.provisioning.management.tabs.settings') }}</span>
      </v-tab>
    </v-tabs>
  </v-flex>
</template>
<script>
export default {
  data: () => ({
    selectedTab: null,
    avoidAddToHistory: false,
    defaultTab: 'tenants',
  }),
  created() {
    this.$root.$on('switch-page', this.switchPage);
    window.addEventListener('popstate', (event) => this.initSelectedTab(event));
  },
  mounted() {
    this.initSelectedTab();
  },
  methods: {
    initSelectedTab(event) {
      const href = window.location.pathname;
      const hrefParts = href.split('/');
      if (event) {
        this.avoidAddToHistory = true;
      }
      const linkPart = hrefParts[hrefParts.length - 1];
      const tab = this.$refs[linkPart] && linkPart || this.defaultTab;
      this.openPage(tab);
    },
    switchPage(tab) {
      if (tab && this.$refs[tab]) {
        this.$refs[tab].$el.click();
      }
    },
    openPage(selectedTab, event) {
      if (event || selectedTab) {
        if (event) {
          event.preventDefault();
          event.stopPropagation();
        }
        if (selectedTab) {
          this.selectedTab = selectedTab;
          if (!this.avoidAddToHistory) {
            const baseUri = `${window.location.pathname.split(eXo.env.portal.selectedNodeUri)[0]}${eXo.env.portal.selectedNodeUri}`;
            window.history.pushState({}, '', `${baseUri}/${selectedTab}`);
            const labelKeySuffix = `deeds.provisioning.management.tabs.${selectedTab}`;
            document.title = `${this.$t(labelKeySuffix)} - ${this.$t('deeds.provisioning.management.page.title')}`;
          }
          this.avoidAddToHistory = false;
          this.$root.$emit('location-change', this.selectedTab);
        }
        if (this.isMobile) {
          window.scrollTo(0, 0);
        }
      }
    }
  },
};
</script>