<template>
  <div>
    <p>
      <picker-helper v-model="search" ref="picker">
        <template slot="value">
          <picker-value :ondelete="onDeletePageId" v-if="path">{{path}}</picker-value>
        </template>
        <ul slot="options">
          <page-picker-tree-item v-for="page in pageTree" :page="page" :key="page.id" :search="search" :page-enabled-test="pageEnabledTest" v-on:page-chosen="setPage"></page-picker-tree-item>
        </ul>
      </picker-helper>
    </p>
    <p class="mb-0">
      <select v-model="pageVersionId" :disabled="!pageVersions" class="form-control">
        <option :value="null" disabled>Kies de versie van de pagina</option>
        <template  v-if="pageVersions">
          <option v-for="pageVersion in pageVersions" :key="pageVersion.id" :value="pageVersion.id">
            {{pageVersion.name || '(Naamloze versie)'}}
            <template v-if="isLive(pageVersion)"> (live)</template>
          </option>
        </template>
      </select>
    </p>
  </div>
</template>

<style lang="scss" scoped>
ul {
  min-width: 200px;
  padding-left: 1.3em;
  margin: 0;
}
</style>

<script>
import { mapGetters, mapState } from 'vuex';

import pagePickerTreeItem from '../shared/form/page-picker-tree-item.vue';
import pickerHelper from '../shared/picker-helper.vue';
import pickerValue from '../shared/picker-value.vue';
import { getPublishedVersions } from './version-utils';
import PageApi from '../api/page-api';

export default {
  name: 'copy-page-picker',
  props: {
    pageEnabledTest: {
      type: Function,
      default: () => 'enabled'
    },
    initialId: String
  },
  data() {
    return {
      search: '',
      pageId: null,
      pageVersions: null,
      pageVersionId: null,
    };
  },
  mounted() {
    if (this.initialId) {
      this.setPage(this.initialId);
    }
  },
  computed: {
    ...mapState('pages', [
      'allPages'
    ]),
    ...mapGetters('pages', [
      'pageTree',
      'types'
    ]),
    path() {
      const page = this.allPages.find(page => page.id == this.pageId);
      return page ? page.path : null;
    },
    version() {
      return this.pageVersions.find(pv => pv.id == this.pageVersionId);
    },
    schema() {
      return this.version && this.types[this.version.$type];
    }
  },
  methods: {
    onDeletePageId() {
      this.pageId = null;
      this.pageVersionId = null;
      this.pageVersions = null;
      this.livePageVersion = null;
    },
    hidePopup() {
      this.$refs.picker.hidePopup();
    },
    async setPage(pageId) {
      this.pageId = pageId;
      this.pageVersionId = null;
      this.pageVersions = null;

      const page = await PageApi.getPageById(pageId);
      if (page.versions && page.versions.length) {
        this.pageVersions = page.versions;

        if (page.versions.length == 1) {
          this.pageVersionId = page.versions[0].id;
        }
        this.livePageVersion = getPublishedVersions(page.versions)[0] || null;
      }
      // hidePopup should be called after the next focus event
      setTimeout(() => {
        this.hidePopup();
      }, 0);
    },
    isLive(pageVersion) {
      return pageVersion == this.livePageVersion;
    }
  },
  watch: {
    pageVersionId(pageVersionId) {
      this.$emit('input', pageVersionId);
    }
  },
  components: {
    pagePickerTreeItem,
    pickerHelper,
    pickerValue,
  }
};
</script>
