<template>
    <v-card
        tile
        flat
    >
        <v-sheet class="d-flex">

            <cursuri-asigneaza-selector-left
                :cursuri="cursuri"
                :height="height"

                @select-curs="OnSelectCurs"
            />

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

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

<script>
    export default {
        props: {
            // app: {required: true},
            height: {default: 300},
            cursuriatasate: {required: true},
            value: {required: true},
        },

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

        watch: {
            cursuriatasate: function() {
                this.CreateCursuri();
            }
        },

        methods: {

            CreateCursuri() {
                this.cursuri = [];

                let r = _.map(this.cursuriatasate, item => item.curs);

                let cursuri = [];
                _.each(r, curs => {

                    let exists = _.find(cursuri, el => 1 * el.id == 1 * curs.id);
                    if( ! exists )
                    {
                        cursuri.push(curs);
                    }
                })


                this.cursuri = _.orderBy(cursuri, [item => item.name], ['asc']);
            },

            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() {
            this.CreateCursuri();
        },

        name: 'CursuriAsigneazaSelector',
    }
</script>