<script>
    /*eslint-disable*/
    const validators = {
        email: new RegExp(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/),
        url: new RegExp(/^(https?|ftp|rmtp|mms):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i),
        text: new RegExp(/^[a-zA-Z]+$/),
        digits: new RegExp(/^[\d() \.\:\-\+#]+$/),
        isodate: new RegExp(/^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/)
    }

    export default {
        name: 'InputTag',

        props: {
            tags: {
                type: Array,
                default: () => []
            },
            placeholder: {
                type: String,
                default: ''
            },
            onChange: {
                type: Function
            },
            readOnly: {
                type: Boolean,
                default: false
            },
            validate: {
                type: String,
                default: ''
            },
            inputClass: {
                type: String,

            }
        },

        data() {
            return {
                newTag: ''
            }
        },

        methods: {
            focusNewTag() {
                if (this.readOnly) {
                    return
                }
                this.$el.querySelector('.new-tag').focus()
            },

            addNew(tag) {
                if (tag && this.tags.indexOf(tag) === -1 && this.validateIfNeeded(tag)) {
                    this.tags.push(tag)
                    this.tagChange()
                }
                this.newTag = ''
            },

            validateIfNeeded(tagValue) {
                if (this.validate === '' || this.validate === undefined) {
                    return true
                } else if (Object.keys(validators).indexOf(this.validate) > -1) {
                    return validators[this.validate].test(tagValue)
                }
                return true
            },

            remove(index) {
                this.tags.splice(index, 1)
                this.tagChange()
            },

            removeLastTag() {
                if (this.newTag) {
                    return
                }
                this.tags.pop()
                this.tagChange()
            },

            tagChange() {
                if (this.onChange) {
                    // avoid passing the observer
                    this.onChange(JSON.parse(JSON.stringify(this.tags)))
                }
            },
            getInputClass() {
                let defaultClass = {'read-only': readOnly};
                if (this.inputClass && this.inputClass !== '') {
                    defaultClass += ' '  + this.inputClass;
                }
                return defaultClass;
            }
        }
    }
</script>

<template>

    <div @click="focusNewTag()" v-bind:class="getInputClass()" class="vue-input-tag-wrapper">
    <span v-for="(tag, index) in tags" v-bind:key="index" class="input-tag">
      <span>{{ tag }}</span>
      <a v-if="!readOnly" @click.prevent.stop="remove(index)" class="remove"></a>
    </span>
        <input v-if="!readOnly" v-bind:placeholder="placeholder" type="text" v-model="newTag" v-on:keydown.delete.stop="removeLastTag()" v-on:keydown.enter.188.tab.prevent.stop="addNew(newTag)" class="new-tag"/>
    </div>

</template>

<style>

    .vue-input-tag-wrapper {
        background-color: #fff;
        border: 1px solid #ccc;
        overflow: hidden;
        padding-left: 4px;
        padding-top: 4px;
        cursor: text;
        text-align: left;
        -webkit-appearance: textfield;
    }

    .vue-input-tag-wrapper .input-tag {
        background-color: #cde69c;
        border-radius: 2px;
        border: 1px solid #a5d24a;
        color: #638421;
        display: inline-block;
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 4px;
        margin-right: 4px;
        padding: 3px;
    }

    .vue-input-tag-wrapper .input-tag .remove {
        cursor: pointer;
        font-weight: bold;
        color: #638421;
    }

    .vue-input-tag-wrapper .input-tag .remove:hover {
        text-decoration: none;
    }

    .vue-input-tag-wrapper .input-tag .remove::before {
        content: " x";
    }

    .vue-input-tag-wrapper .new-tag {
        background: transparent;
        border: 0;
        color: #777;
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 6px;
        margin-top: 1px;
        outline: none;
        padding: 4px;
        padding-left: 0;
        width: 80px;
    }

    .vue-input-tag-wrapper.read-only {
        cursor: default;
    }

</style>
