<template>
  <div class="page-version-editor d-flex flex-row h-100">
    <tabs ref="tabs" class="flex-grow-1" v-if="isFolder(page)">
      <tab title="Instellingen" class="container py-4">
        <div class="alert alert-info">
          Dit is een folder.
        </div>
        <page-editor-structure :page="page" />
      </tab>
    </tabs>
    <tabs v-else ref="tabs" class="flex-grow-1">
      <tab title="Content">
        <template v-if="version && schema">
          <editor :item="version" :schema="schema" />
        </template>
      </tab>
      <tab title="SEO">
        <page-editor-seo v-if="schema" :version="version" />
      </tab>
      <tab title="Schedules">
        <page-editor-schedules :version="version" :permissions="permissions" />
      </tab>
      <tab title="Instellingen">
        <page-editor-settings v-if="schema" :page="page" :version="version" :is-new="isNew" />
      </tab>
      <tab title="Redirects" v-if="page && page.versions">
        <!--<documentation-editor v-if="schema && schema.properties" small :schema="schema"></documentation-editor>-->
        <redirects :page="page" />
      </tab>
    </tabs>
    <validator :test="changed" />
    <editor-sidebar class="page-version-editor-sidebar">
      <slot name="sidebar"></slot>
    </editor-sidebar>
  </div>
</template>

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

// @ts-ignore
import * as formElements from '../shared/form/all.js';
// @ts-ignore
import { ValidatorMixin } from '../shared/form/validator-mixin.js';
import Tabs from '../shared/tabs.vue';
import Tab from '../shared/tab.vue';
import PageEditorSchedules from './page-editor-schedules.vue';
import PageEditorSeo from './page-editor-seo.vue';
import PageEditorSettings from './page-editor-settings.vue';
import EditorSidebar from '../shared/editor-sidebar.vue';
import PageEditorStructure from './page-editor-structure.vue';
import Redirects from '../shared/redirects.vue';
import Editor from '../shared/editor.vue';

import { Schema, Version, VersionedPage } from '../types/api';
import { PageEditorPermissions } from './page-editor.vue';

const PageStore = namespace('pages');

@Component({
  components: {
    Tabs,
    Tab,
    PageEditorSchedules,
    PageEditorSeo,
    PageEditorSettings,
    EditorSidebar,
    PageEditorStructure,
    Redirects,
    Editor,
    ...formElements
  },
  mixins: [ValidatorMixin]
})
export default class PageVersionEditor extends Vue {
  @Prop(Boolean) readonly isNew!: boolean;
  @Prop({ type: Object }) readonly version!: Version | null;
  @Prop({ type: Object }) readonly page!: VersionedPage | null;
  @Prop({ type: Object, required: true }) readonly permissions!: PageEditorPermissions;

  @Ref() readonly tabs!: Tabs;

  changed = false;
  validatorGroup: { isValid: boolean } | null = null;

  @PageStore.Getter('types') readonly types!: any;
  @PageStore.Getter('isFolder') readonly isFolder!: (page: VersionedPage) => boolean;

  created() {
    (this as any).validatorEventBus.$emit('needs-validator-group', (vg: { isValid: boolean }) => this.validatorGroup = vg);
  }

  resetChanged() {
    // There might be pending changes to this.version, wait those out.
    this.$nextTick(() => {
      this.changed = false;
      this.$emit('reset');
    });
  }

  get schema(): Schema {
    return this.version ? this.types[this.version.$type] : {};
  }

  selectTabByTitle(title: string) {
    this.tabs.selectTabByTitle(title);
  }

  @Watch('version', { deep: true })
  onVersionChange(newValue: Version, oldValue: Version) {
    // the whole version can change as well, only set 'changed' prop when editing on the same version
    if (newValue.id === oldValue.id) {
      this.changed = true;
    } else {
      this.resetChanged();
    }
  }

  @Watch('validatorGroup.isValid')
  onValidatorGroupChange(isValid: boolean) {
    this.$emit('validate', isValid);
  }
}
</script>

<style lang="scss" scoped>
@import '../variables';

.page-version-editor {
  ::v-deep .tabs-content {
    border-radius: 0 0 0 0.25rem;
    border-top: 0;
    border-right: 0;
    height: 100%;
  }

  &-sidebar {
    margin-top: $tabs-nav-height - 1px;
    border-radius: 0 0.25rem 0.25rem 0;
  }
}
</style>
