<template>
    <v-sheet>

        <cs-info-alert 
            v-if="tematica.length == 0"
            message="Cursul nu are definită tematica."
            class="mb-4"
        />

        <curs-tematica-lista 
            v-else
            :items="tematica"
            class="mb-4"
            @reordered="OnReordered"
            @delete="OnDeleteItem"
            
        />

        <v-textarea
            ref="FirstControl"
            dense
            outlined
            auto-grow
            clearable
            no-resize
            rows="2"
            persistent-hint
            color="blue"
            :error-messages="[]"
            :rules="[]"
            :label="__('Tematică nouă')"
            :hint="__('Scrieți aici tematica și confirmați adăugarea')"
            v-model="newtematica"
        >

            <template #append-outer>
                <cs-btn 
                    icon="mdi-plus"
                    color="primary"
                    tooltip="Confirmarea adăugării tematicii"
                    :disabled="! newtematica"
                    @click="OnClickInsert"
                />
            </template>
        </v-textarea>
        
    </v-sheet>
</template>

<script>
    import RandomString from '@CsFunc/global/RandomString';
    const OrderByOrderNo = require('@CsFunc/global/OrderByOrderNo');
    
    export default {

        props: {
            value: {required: true},
        },

        data: () => ({
            order_no: 0,
            newtematica: null,
        }),

        computed: {

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

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

        watch: {
            newtematica: function(value) {
                this.$emit('new-tematica', value);
            }
        },

        methods: {
            OnDeleteItem(id) {
                let r = [...this.tematica];
                r = _.filter(r, item => item.id != id);
                this.tematica = r;
            },

            OnReordered(items) {
                let r = [...items];
                _.each(r, (item, index) => {
                    item.order_no = index + 1
                })
                this.tematica = r;
            },

            OnClickInsert() {
                let r = [...this.tematica];
                r.push({
                    id: RandomString(16),
                    text: this.newtematica,
                    order_no: ++this.order_no,
                })
                this.tematica = r;

                this.newtematica = '';

                this.Focus();
            },

            Focus() {
                this.$refs.FirstControl.$refs.input.focus();
            }
        },

        created() {
            this.order_no = !!this.tematica ? this.tematica.length : 0;
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },
        
        name: 'CursTematicaControl',
    }
</script>