<template>
  <div class="row">
    <h1 class="col-sm-12">{{page.name}}
      <span class="page-type">{{schema.title}}</span>
    </h1>
    <validator-group class="col-lg-6 col-sm-12">
      <submit class="btn-save" :action="move" :class="{'should-save': shouldSaveMove}">Verplaatsen</submit>
      <field label="Bovenliggende pagina" :class="{ 'should-save': shouldSaveMove }">
        <page-picker v-model="parentId" :page-enabled-test="notThisPage" v-if="moveRenameButtons" :readonly="schema.preventMove"></page-picker>
        <page-picker v-model="page.parentId" :page-enabled-test="notThisPage" v-else></page-picker>
      </field>
    </validator-group>
    <validator-group class="col-lg-6 col-sm-12">
      <submit class="btn-save" :action="rename" :class="{'should-save': shouldSaveRename}">Hernoemen</submit>
      <field label="Url-gedeelte" :class="{ 'should-save': shouldSaveRename }">
        <input class="form-control" v-model="name" v-if="moveRenameButtons" :readonly="schema.preventRename">
        <input class="form-control" v-model="page.name" v-else>
      </field>
    </validator-group>
  </div>
</template>

<style lang="scss" scoped>
.form-group {
  position: relative;
  left: 0;

  transition: left 0.3s ease;

  &.should-save {
    left: -10em; // transform breaks the popup layering
  }
}

.btn-save {
  position: absolute;
  right: 0.9rem;
  width: 9em;
  margin-top: 2px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  &.should-save {
    opacity: 1;
    pointer-events: initial;
  }
}
.page-type {
  float: right;
  font-size: 60%;
  padding-top: 0.5em;
}
</style>

<script>
  import { pageStore } from '../tools/page-store.js';

  import * as formElements from '../shared/form/all.js';

  export default {
    props: {
      page: {
        type: Object,
        required: true
      },
      moveRenameButtons: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        parentId: this.page.parentId,
        name: this.page.name
      }
    },
    watch: {
      page() {
        this.parentId = this.page.parentId;
        this.name = this.page.name;
      }
    },
    computed: {
      shouldSaveMove(){
        return this.moveRenameButtons && this.page.parentId != this.parentId;
      },
      shouldSaveRename(){
        return this.moveRenameButtons && this.page.name != this.name
      },
      schema() {
        return (this.page.versions && this.page.versions[0] && pageStore.types[this.page.versions[0].$type]) || {};
      }
    },
    methods: {
      rename() {
        return pageStore.rename(this.page, this.name)
          .then(updatedPage => {
            this.page.name = this.name = updatedPage.name;
            this.$store.dispatch('alerts/addSuccess', 'De paginanaam is gewijzigd!');
          })
          .catch(e => this.$store.dispatch('alerts/addError', `De paginanaam wijzigen is niet gelukt! <br> ${e.message}`));
      },
      move() {
        return pageStore.move(this.page, this.parentId)
          .then(updatedPage => {
            this.page.parentId = this.parentId = updatedPage.parentId;
            this.$store.dispatch('alerts/addSuccess', 'De pagina is verplaatst!')
          })
          .catch(e => this.$store.dispatch('alerts/addError', `De pagina verplaatsen is niet gelukt! <br> ${e.message}`));
      },
      notThisPage(subPage) {
        return this.page.id == subPage.id ? 'subtree-disabled' : 'enabled';
      }
    },
    components: {
      ...formElements
    }
  }
</script>
