<template>
  <div>
    <portal to="top-header-title">{{ itemName || '' }} Editor</portal>

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

<script lang="ts">
import { Component, Vue, Prop, 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 CrudEditorTranslations from '../shared/language/crud-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,
    CrudEditorTranslations
  }
})
export default class CrudEditorEmptyTranslation extends Vue {
  @Prop(String) readonly module!: string;

  languageRef = this.$route.query.languageRef;
  itemId = this.$route.query.itemId;
  itemName = this.$route.query.itemName;

  @Ref() readonly crudEditorTranslations!: CrudEditorTranslations;

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

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

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