<template>
  <div class="cst-book-min-cont-hei">
    <div class="bookaro-dashboard-subnav mb-6">
      <a
        v-for="tab in tabs"
        :key="tab.key"
        :href="`?tab=${tab.key}#settings`"
        @click.prevent="setTab(tab.key)"
        :class="[
          'bookaro-dashboard-subnav__item',
          currentTab === tab.key ? 'is-active' : ''
        ]"
      >
        <span class="bookaro-dashboard-subnav__icon" aria-hidden="true">
          <svg
            v-if="tab.icon === 'delete_data'"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <polyline points="3 6 5 6 21 6" />
            <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
            <path d="M10 11v6M14 11v6" />
            <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
          </svg>
        </span>
        <span class="bookaro-dashboard-subnav__label">{{ tab.label }}</span>
      </a>
    </div>

    <div class="bookaro-card">
      <div class="bookaro-card__body">
        <component
          :is="currentTabComponent"
          :i18n="i18n"
        />
      </div>
    </div>
  </div>
</template>

<script>
import DeleteDataTab from '@bookaro-free/components/DeleteDataTab.vue';
export default {
  name: 'OwnerSettingsView',
  components: { DeleteDataTab },
  props: { i18n: { type: Object, required: true } },
  data() {
    return { currentTab: 'delete_data' };
  },
  computed: {
    tabs() {
      return [ { key: 'delete_data', label: this.i18n.delete_data_tab, icon: 'delete_data' } ];
    },
    currentTabComponent() {
      return {
        delete_data: 'DeleteDataTab'
      }[this.currentTab];
    }
  },
  methods: {
    setTab(key) {
      this.currentTab = key;
      const url = new URL(window.location.href);
      url.searchParams.set('tab', key);
      window.history.replaceState(null, '', url.pathname + url.search + '#settings');
    }
  },
  mounted() {
    const params = new URLSearchParams(window.location.search);
    const tab = params.get('tab');
    if (tab && this.tabs.find(t => t.key === tab)) {
      this.currentTab = tab;
    }
  }
};
</script>

<style scoped>
.cst-book-min-cont-hei { min-height:50vh; }
</style>
