<template>
  <nav aria-label="breadcrumb" v-if="isNested">
    <ol class="breadcrumb">
      <li v-if="selectedLanguage" class="breadcrumb-item">{{ selectedLanguage.key }}</li>
      <li class="breadcrumb-item" v-for="page in breadCrumbs.parents" :key="page.id">
        <router-link :to="{ name: 'page-editor', params: { id: page.id } }">{{ page.name }}</router-link>
      </li>
      <li class="breadcrumb-item active" aria-current="page">{{ breadCrumbs.current.name }}</li>
    </ol>
  </nav>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import { Page, PageBreadCrumbs as IPageBreadCrumbs } from '../types/api';
import { SupportedLanguage } from '../types/language';

const PageStore = namespace('pages');
const LanguageStore = namespace('languages');

@Component
export default class PageBreadCrumbs extends Vue {
  @Prop({ type: Object, required: false }) readonly page!: Page;

  @PageStore.Getter('breadCrumbsByPage') readonly breadCrumbsByPage!: (page: Page) => IPageBreadCrumbs;
  @LanguageStore.State('selected') selectedLanguage!: SupportedLanguage | null;

  get breadCrumbs(): IPageBreadCrumbs {
    return this.breadCrumbsByPage(this.page);
  }

  get isNested(): boolean {
    return this.breadCrumbs.parents.length > 0;
  }
}
</script>
