<template>

    <div class="tagInput">

        <vue-tags-input
                v-model="tag"
                :tags="tags"
                @tags-changed="newTags => updateTags(newTags)"
                :placeholder="inputPlaceholder"
                :autocomplete-items="autocompleteObjects"
        />

        <input
               type="hidden"
               v-model="tagString"
               :name="inputName"
        />

    </div> <!-- .tagitField -->

</template>

<script>

export default {

    name: 'mtcTagInput',
    props: {
        inputPlaceholder: {
            type: [String],
            default (rawProps) {
                return 'Add tag';
            }
        },
        inputName: {
            type: [String],
            default (rawProps) {
                return 'tags';
            }
        },
        autocompleteItems: {
            type: [Array, Object],
            default (rawProps) {
                return [];
            }
        },
        tagsString: {
            type: [String, Boolean],
            default (rawProps) {
                return '';
            }
        }
    },
    computed: {
        autocompleteObjects() {

            let ac = [];

            if(this.autocompleteItems.length) {

                this.autocompleteItems.forEach(item => {
                    ac.push({
                        text: item
                    });
                });

            }
            if(ac.length < 1) {
                return ac;
            }

            return ac.filter(i => {
                return i.text.toLowerCase().indexOf(this.tag.toLowerCase()) !== -1;
            });


        }
    },
    data() {
        return {
            tag: '',
            tags: [],
            tagString: '',
            autoCompleteArray: []
        }
    },
    created() {
        this.tagString = this.tagsString;
        this.tags = this.stringToTags(this.tagString);
    },
    methods: {

        updateTags(newTags) {

            let str = '';

            newTags.forEach((tag, i) => {

                if(i > 0) {
                    str += ',';
                }

                str += tag.text;

            });

            this.tags = newTags;
            this.tagString = str;
        },

        stringToTags(inputString) {

            if(typeof inputString == 'undefined') {
                return;
            }

            if(!inputString.length) {
                inputString = this.defaultTags;
            }

            let tags = [];

            if(inputString.length) {
                let splitTags = inputString.split(',');

                splitTags.forEach(tag => {

                    tags.push({
                        text: tag
                    });

                });
            }

            return tags;

        },

    }
}

</script>

<style lang="less">

    .ti-input {

        .ti-tags {
            border-radius: 59px;
        }

    }

    .tagInput .vue-tags-input .ti-autocomplete {

        top: 100%;
        margin-top: 6px;
        overflow: hidden;
        border-radius: 4px;
        border: 1px solid #E2DFD4;
        box-shadow: 0 8px 8px rgba(0,0,0,0.08);

        &:before {
            display: none;
        }

        ul {
            overflow: auto;
            max-height: 150px;
            height: auto;
        }
    }


</style>
