<template>
  <span>
    <slot name="button" :redirects="redirects" :openModal="openModal" :alertRedirectNeeded="alertRedirectNeeded">
      <button @click="openModal">Redirects ({{ redirects.length }})</button>
    </slot>
    <modal ref="modal">
      <div class="modal-header">
        <h4 class="modal-title">{{ redirects.length }} redirect(s)</h4>
      </div>

      <div class="modal-body">
        <p>
          De onderstaande redirects hebben dezelfde "van" url als de huidige pagina.<br />
          Zolang deze pagina gepubliceerd is, wordt er niet geredirect.
        </p>
        <table class="table table-striped">
          <thead>
            <th>Omschrijving</th>
            <th>Start</th>
            <th>Eind</th>
            <th>Redirect naar</th>
            <th>Pagina</th>
          </thead>
          <tbody>
            <redirect-item v-for="redirect in redirects" :redirect="redirect" :key="redirect.id" />
          </tbody>
        </table>
        <p v-if="alertRedirectNeeded">
          Deze pagina heeft geen gepubliceerde versies meer en er zijn geen redirects.<br />
          Gebruik onderstaande knop om een redirect toe te voegen.
        </p>

        <router-link :to="{ name: 'create-redirect', query: createRedirectQuery }" class="btn btn-primary"
          ><span class="icon-plus"></span> Maak een redirect aan</router-link
        >
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" @click="closeModal">Sluit</button>
      </div>
    </modal>
  </span>
</template>

<style lang="scss" scoped>
.modal-body {
  max-height: 50vh;
  overflow: scroll;
}
</style>

<script>
import RedirectApi from '../api/redirect-api';
import modal from './modal.vue';
import redirectItem from './redirect-item.vue';
import { isDepublished, isPublished } from '../pages/version-utils';
import dayjs from 'dayjs';

export default {
  props: {
    page: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      redirects: [],
      isDeleteError: false
    };
  },
  async mounted() {
    await this.getRedirects();
  },
  watch: {
    async page() {
      await this.getRedirects();
    }
  },
  methods: {
    async getRedirects() {
      this.redirects = await RedirectApi.getRedirects(this.page.id);
    },
    openModal() {
      this.$refs.modal.show();
    },
    closeModal() {
      this.$refs.modal.hide();
    }
  },
  computed: {
    hasPublishedVersions() {
      return this.page.versions.some(isPublished);
    },
    hasDepublishedVersions() {
      return this.page.versions.some(isDepublished);
    },
    alertRedirectNeeded() {
      return !this.hasPublishedVersions && this.hasDepublishedVersions && !this.redirects.length;
    },
    latestDepublishDate() {
      const dates = this.page.versions.map((version) => version.depublishDate);
      return Math.max(...dates);
    },
    createRedirectQuery() {
      const url = this.page.versions[0].page.url; // this.page.url is not correct when page has a parent.
      const redirectValues = {
        from: url,
        description: `${url} gedepubliceerd`
      };
      const startDate = this.latestDepublishDate;
      if (startDate) {
        redirectValues.startDate = dayjs(Math.max(new Date(), startDate)).format();
      }
      return redirectValues;
    }
  },
  components: {
    modal,
    redirectItem
  }
};
</script>
