<template>
  <div>
    <portal to="top-header-title">Pagina</portal>

    <div class="page-container d-flex flex-row">
      <div class="card flex-grow-1 page-editor d-flex align-items-start px-3 py-4">
        <h3>Vertaling {{ selectedLanguage.name }} toevoegen?</h3>
        <p>De pagina bestaat nog niet in het {{ selectedLanguage.name }}.</p>
        <button class="btn btn-primary" @click="pageEditorTranslations.addPageTranslationModal.open(selectedLanguage.key)">Ja, vertalen</button>
      </div>
      <editor-sidebar class="page-editor-sidebar">
        <editor-sidebar-item>
          <page-editor-translations ref="pageEditorTranslations" :language-ref="languageRef" :version-id="versionId" />
        </editor-sidebar-item>
      </editor-sidebar>
    </div>
  </div>
</template>

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

import EditorSidebar from '../shared/editor-sidebar.vue';
import EditorSidebarItem from '../shared/editor-sidebar-item.vue';
import PageEditorTranslations from '../shared/language/page-editor-translations.vue';
import { SupportedLanguage } from '../types/language';
import { RawLocation, Route } from 'vue-router';

const LanguageStore = namespace('languages');

Component.registerHooks([
  'beforeRouteUpdate'
]);

@Component({
  components: {
    EditorSidebar,
    EditorSidebarItem,
    PageEditorTranslations
  }
})
export default class PageEditorEmptyTranslation extends Vue {
  languageRef = this.$route.params.languageRef;
  languageName = this.$route.query.language;
  versionId = this.$route.query.versionId;

  @Ref() readonly pageEditorTranslations!: PageEditorTranslations;

  @LanguageStore.State('selected') selectedLanguage!: SupportedLanguage;

  beforeRouteUpdate(to: Route, from: Route, next: (to?: RawLocation | false) => void) {
    this.pageEditorTranslations?.handlePageTranslationSwitch(to, from, next);
  }
}
</script>

<style lang="scss" scoped>
.page-editor {
  border-radius: 0.25rem 0 0 0.25rem;
  border-right: 0;
}
.page-editor-sidebar {
  border-radius: 0 0.25rem 0.25rem 0;
}
</style>
