<template>
    <v-card tile flat>
        <v-sheet class="d-flex">
            <cursuri-selector-left
                :cursuri="filteredcursuri"
                :height="height"

                @select-curs="OnSelectCurs"
                @search="OnSearch"
            />

            <cursuri-selector-right
                :cursuri="selected"
                :height="height"

                @unselect-curs="OnUnselectCurs"
            />
        </v-sheet>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            height: {default: 320},
            value: {required: true},
            target: {default: null},
        },

        data: () => ({
            searchtext: '',
            cursuri: [],
            
            selected: [],
            
        }),

        computed: {
            cursuriDataProvider() {
                return this.app.dataSession.Activecursuri;
            },

            filteredcursuri() {
                if(! this.searchtext )
                {
                    return this.cursuri;
                }
                return _.filter(this.cursuri, item => {
                    return item.name.toUpperCase().indexOf(this.searchtext.toUpperCase()) > -1; 
                });
            }
        },

        methods: {
            OnSearch(searchtext) {
                this.searchtext = searchtext;
            },

            AddItem(list, curs) {
                let l  = [...list], id = curs.id;
                l = _.filter(l, item => 1 * item.id != 1 * id);
                l.push(curs);
                l = _.orderBy(l, [item => item.name], ['asc'])
                return l;
            },

            RemoveItem(list, curs) {
                let l  = [...list], id = curs.id;
                l = _.filter(l, item => 1 * item.id != 1 * id);
                return l;
            },

            OnSelectCurs(curs) {
                this.cursuri = this.RemoveItem(this.cursuri, curs);
                this.selected = this.AddItem(this.selected, curs);
                this.InteractiveChange();
            },

            OnUnselectCurs(curs) {
                this.selected = this.RemoveItem(this.selected, curs);
                this.cursuri = this.AddItem(this.cursuri, curs);
                this.InteractiveChange();
            },

            InteractiveChange() {
                this.$emit('input', _.map(this.selected, item => 1 * item.id));
            }
        },

        created() {
            if(this.target == 'customer-cursuri')
            {
                this.cursuri = _.map(this.app.dataSession.Cursuriatasate.items, item => item.curs);
            }
            else
            {
                this.cursuriDataProvider.GetActiveCursuri();

                let i = setInterval( () => {
                    if(! this.cursuriDataProvider.processing)
                    {
                        clearInterval(i);
                        this.cursuri = this.cursuriDataProvider.items;
                    }
                }, 350);
            }
        },

        name: 'CursuriSelector',
    }
</script>