<template>
    <v-sheet>
        <div v-if="options.length == 0" class="warning--text">
            Nu sunt definite opțiuni.
        </div>

        <v-chip
            small
            v-for="(option, index) in options"
            :key="'option-' + index"
            outlined
            class="mr-1"
            close
            @click:close="RemoveOption(option)"
        >
            {{option.text}}
        </v-chip>

        <v-chip
            small
            outlined
            class="mr-1"
            v-if="! disabled"
        >
            <v-text-field 
                v-if="mode == 'insert'"
                dense
                
                hide-details
                v-model="newoption"
                ref="Insert"
                class="text-body-2"
            >
            </v-text-field>

            <v-btn v-if="mode == 'view'" small icon @click="ShowForm">
                <v-icon>mdi-plus</v-icon>
            </v-btn>

            <v-btn v-if="mode == 'insert'" small icon @click="AddOption">
                <v-icon>mdi-content-save</v-icon>
            </v-btn>
        </v-chip>

    </v-sheet>
</template>

<script>
    const RandomString = require('@CsFunc/global/RandomString');

    export default {
        props: {
            value: {required: true},
            disabled: {default: false},
        },

        data: () => ({
            newoption: null,
            mode: 'view',
        }),

        computed: {

            
            options: {

                get: function() {
                    return this.value.options;
                },

                set: function(options) {
                    this.$emit('input', {
                        ...this.value,
                        options,
                    });
                }
            },
        },

        methods: {
            ShowForm() {
                this.newoption = null;
                this.mode = 'insert';
                setTimeout( () => {
                    this.$refs.Insert.focus();
                }, 100)
            },

            AddOption() {
                if(this.newoption)
                {
                    let options = [...this.options];
                    options.push({
                        text: this.newoption,
                        value: RandomString(64),
                    })
                    this.options = [...options];
                    this.newoption = null;
                    this.mode = 'view';
                }
            },

            RemoveOption(option) {
                let options = _.filter(this.options, item => item.text != option.text);
                this.options = [...options];
            }
        },

        name: 'ColumnOptionsList',
    }
</script>