const Fieldtype = {
    template: `
    <div v-if="model.urlList">
<div class="uk-flex uk-flex-middle" v-for="(locale, key) in options" :key="locale">
<div v-html="locale" />
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" :value="model.urlList[key]" @input="validate($event, key)">
<div>/</div>
<div v-if="showError[key]">!!! Url invalid</div>
</div>
</div>
    `,
    mixins: [window.Storyblok.plugin],
    data() {
        return {
            showError: {}
        }
    },
    methods: {
        _extend(target) {
          for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target;
        },
        initWith() {
            return {
                plugin: 'rebtel-com-locale-urls',
                urlList: {},
                computedUrlList: {}
            }
        },
        pluginCreated() {

        },
        validate(e, key) {
          let inputValue = e.target.value
          if (!inputValue) {
            delete this.model.urlList[key]
          } else {
            if (inputValue.indexOf(' ') > -1) {
              this.showError[key] = true
              this.showError = this._extend({}, this.showError)
            } else {
              this.showError[key] = false
              let route = `${this.options[key]}${inputValue}/`.replace('//', '/')
              this.model.computedUrlList[key] = route
            }
            this.model.urlList[key] = inputValue
            this.$emit('changed-model', this.model);
          }
        }
    },
    watch: {
        'model': {
            handler: function(value) {
                this.$emit('changed-model', value);
            },
            deep: true
        }
    }
}