<template>
  <div class="py-4 container">
    <div>
      <field label="Schedule start">
        <datetime-picker v-model="version.publishDate" :max="version.depublishDate" :readonly="hasRecurringSchedules"></datetime-picker>
      </field>

      <field label="Schedule stop">
        <datetime-picker v-model="version.depublishDate" :min="version.publishDate" :readonly="hasRecurringSchedules"></datetime-picker>
        <validator :test="!version.publishDate || !version.depublishDate || new Date(version.publishDate).getTime() < new Date(version.depublishDate).getTime()">
          Schedule start ligt na schedule stop
        </validator>
      </field>

      <div v-show="hasRecurringSchedules" class="footnote offset-sm-4 col-sm-8">
        Bij terugkerende schedules worden de start/stop velden automatisch gevuld op basis van de ingestelde schedules.
      </div>
    </div>

    <field label="Terugkerende schedule(s)" v-if="!isNew">
      <recurring-schedule-input :version="version" :recurrent-schedules.sync="recurringSchedules" :permissions="permissions"></recurring-schedule-input>
    </field>
  </div>
</template>

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

// @ts-ignore
import * as formElements from '../shared/form/all.js';
import RecurringScheduleInput from '../shared/form/recurring-schedule-input.vue';

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

@Component({
  components: {
    RecurringScheduleInput,
    ...formElements
  }
})
export default class PageSchedules extends Vue {
  @Prop({ type: Object, required: true }) readonly version!: Version;
  @Prop({ type: Object, required: true }) readonly permissions!: PageEditorPermissions;

  recurringSchedules: RecurringSchedule[] = [];

  get hasRecurringSchedules(): boolean {
    return this.recurringSchedules.length > 0;
  }

  get isNew(): boolean {
    return !this.version.id;
  }
}
</script>
