<template>
  <component :is="elementType" class="form-group row" :class="{ 'has-danger': !isValid }" @click.self.prevent>
    <div v-if="hasLabel" :class="[isRichText ? 'col-sm-12 rich-text-label' : 'col-sm-4', 'col-sm-4 col-form-label']">
      <span>{{ label }}</span>
      <info-tooltip :info="info" />
    </div>

    <div :class="[!isRichText ? 'col-sm-8' : 'col-sm-12', hasLabel ? '' : 'offset-sm-4']">
      <input v-if="noFocus" class="focus-catcher" />
      <slot>
        <!-- This is fallback content, used for the docs page -->
        <input class="form-control" />
      </slot>
    </div>
  </component>
</template>

<style lang="scss" scoped>
.col-form-label {
  text-align: right;
}

.focus-catcher {
  position: absolute;
  visibility: hidden;
}

.rich-text-label {
  text-align: left;
}
</style>

<script>
import infoTooltip from '../info-tooltip.vue';
import validatorGroupBase from '../../tools/validator-group-base.vue';

export default {
  extends: validatorGroupBase,
  name: 'field',
  docs: `Een wrapper voor input elementen en componenten. Toont validatie errors van <code>validator</code> elementen.`,
  props: {
    label: {
      type: String,
      demoValue: 'Demo'
    },
    info: {
      validator: (value) => !value || typeof value == 'string',
      docs: `Voegt een info icoontje toe met een popup tekstje`,
      demoValue: 'Hier kan wat uitleg staan met bijvoorbeeld een link https://q42.nl.'
    },
    'no-focus': {
      type: Boolean,
      default: false,
      docs: `Zet dit aan als dit een wrapper is om een complex invoerveld,
        anders is een klik op het label een klik op de eerste de beste input.`
    },
    schema: {
      type: Object,
      required: false
    }
  },
  methods: {
    showPopup() {
      this.$refs.popup.show(event.target);
    }
  },
  computed: {
    elementType() {
      if (!this.schema) {
        return 'label';
      }

      // 'label' has side effects with enums
      if (this.schema.enum) {
        return 'div';
      }

      // 'label' has side effects for example with booleans
      return this.schema.type === 'string' || this.schema.type === 'integer' || this.schema.type === 'number' ? 'label' : 'div';
    },
    hasLabel() {
      return this.label !== '';
    },
    formattedInfoString() {
      if (this.info) {
        // find urls in string and replace with a tag to make them clickable
        const urlRegex = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?/g;
        const newString = this.info.replace(urlRegex, function createLink(link) {
          return '<a href=' + link + " target='_blank'>" + link + '</a>';
        });

        return newString;
      }

      return null;
    },
    isRichText() {
      return this.schema?.format === 'rich-text';
    }
  },
  components: {
    infoTooltip
  }
};
</script>
