<template>
  <div class="link-modal-content">
    <div class="modal-header">
      <h4>Link toevoegen</h4>
    </div>
    <div class="modal-body">
      <field label="Link type">
        <div class="btn-group">
          <label class="btn" :class="[pageLinkType === 'internal' ? 'btn-primary' : 'btn-outline-primary']">
            <input type="radio" name="radio-page-link-type" value="internal" v-model="pageLinkType" class="custom-control-input" />
            <span>Interne link</span>
          </label>
          <label class="btn" :class="[pageLinkType === 'external' ? 'btn-primary' : 'btn-outline-primary']">
            <input type="radio" name="radio-page-link-type" value="external" v-model="pageLinkType" class="custom-control-input" />
            <span>Externe link</span>
          </label>
        </div>
      </field>

      <template v-if="pageLinkType == 'internal'">
        <field label="Gelinkte pagina" class="col-sm-12">
          <page-picker ref="page-picker" :custom-input="$refs['internal-link-button']" v-model="internalPageLinkGuid" />
        </field>
      </template>

      <template v-if="pageLinkType == 'external'">
        <field label="Externe url" class="col-sm-12">
          <input placeholder="https://www.google.nl" class="form-control form-control-string" v-model="externalLinkUrl" />
          <validator :test="regExpTestUrl(externalLinkUrl)"> Invalide URL: begin met 'http(s)://' en geen dubbele '?' en '#' </validator>
        </field>
      </template>

      <field label="Open in nieuwe tab" class="col-sm-12">
        <div class="btn-group">
          <label class="btn" :class="[linkOpenInTab ? 'btn-primary' : 'btn-outline-primary']">
            <input type="radio" :name="'radio-linkOpenInTab'" :value="true" v-model="linkOpenInTab" class="custom-control-input" />
            <span>Ja</span>
          </label>
          <label class="btn" :class="[!linkOpenInTab ? 'btn-primary' : 'btn-outline-primary']">
            <input type="radio" :name="'radio-linkOpenInTab'" :value="false" v-model="linkOpenInTab" class="custom-control-input" />
            <span>Nee</span>
          </label>
        </div>
      </field>
    </div>
    <div class="modal-footer">
      <button class="btn btn-light" @click="onCancel()">Annuleren</button>
      <button class="btn btn-light" @click="onDeleteLink()" v-if="showDeleteButton">Verwijder bestaande link</button>
      <button class="btn btn-success" @click="onSubmit()" :disabled="!canSubmitLink">Bevestigen</button>
    </div>
  </div>
</template>

<script>
import PagePicker from '../form/page-picker.vue';
import field from '../form/field.vue';
import validator from '../form/validator.vue';

export default {
  name: 'rich-text-link-modal-content',
  components: {
    PagePicker,
    field,
    validator
  },
  props: {
    existingPageLinkType: {
      type: String,
      required: false
    },
    existingLinkOpenInTab: {
      type: Boolean,
      required: false
    },
    existingLinkHref: {
      type: String,
      required: false
    }
  },
  data() {
    const isInternalLink = this.existingPageLinkType === 'internal';
    const internalPageLinkGuid = isInternalLink && this.existingLinkHref ? this.existingLinkHref.replace('page-guid://', '') : null;
    const externalLinkUrl = !isInternalLink && this.existingLinkHref ? this.existingLinkHref : null;

    return {
      showDeleteButton: this.existingLinkHref !== null,
      pageLinkType: this.existingPageLinkType,
      internalPageLinkGuid,
      linkOpenInTab: this.existingLinkOpenInTab,
      externalLinkUrl
    };
  },

  computed: {
    canSubmitLink() {
      if (this.pageLinkType === 'internal') {
        return this.internalPageLinkGuid !== null;
      } else {
        return this.externalLinkUrl !== null && this.regExpTestUrl(this.externalLinkUrl);
      }
    }
  },
  methods: {
    onSubmit() {
      const isInternalLink = this.pageLinkType === 'internal';
      const href = isInternalLink ? `page-guid://${this.internalPageLinkGuid}` : this.externalLinkUrl;
      const target = this.linkOpenInTab ? '_blank' : null;

      this.$emit('submitLink', { href, target, type: this.pageLinkType });
    },
    onDeleteLink() {
      this.$emit('deleteLink');
    },
    onCancel() {
      this.$emit('cancel');
    },
    regExpTestUrl(value) {
      if (!value) return true;
      return new RegExp(/^(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?/g).test(value);
    }
  }
};
</script>

<style lang="scss">
.link-modal-content {
  width: 80vw;
  max-width: 600px;
}
</style>
