<template>
  <label class="form-group row" :class="{'has-danger': !isValid}" @click.self.prevent>
    <div v-if="hasLabel" class="col-sm-4 col-form-label">
      <!-- .stop & .prevent needed to avoid triggering click on <label> (parent) -->
      <i @click.stop.prevent="showPopup" class="info" v-if="info"></i>

      <popup ref="popup" v-if="info">
        <div v-html="formattedInfoString"></div>
      </popup>

      <span>{{label}}</span>
    </div>

    <div class="col-sm-8" :class="[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>
  </label>
</template>

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

  i {
    cursor: pointer;
    font-style: normal;
    float: right;
    margin-left: 10px;
    &::before {
      content: 'i';
      display: inline-block;
      background: #888;
      color: white;
      border-radius: 50%;
      width: 1.5em;
      height: 1.5em;
      text-align: center;
      font-family: serif;
    }
  }

  .focus-catcher {
    position: absolute;
    visibility: hidden;
  }
</style>

<script>
import popup from '../popup.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.`
    }
  },
  methods: {
    showPopup(){
      this.$refs.popup.show(event.target);
    }
  },
  computed: {
    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;
    }
  },
  components: {
    popup
  }
};
</script>
