<template>
    <v-sheet
        :outlined="outlined"
        class="rounded-lg"
    >
        <v-sheet class="text-body-2 font-weight-bold d-flex justify-space-between align-end">
            <div>
                {{ __(control.caption) }}
            </div>
        </v-sheet>

        <div style="width:100%">

            <div class="my-2 d-flex">
                
                <cs-btn 
                    :caption="__('Selectați toate')"
                    :xsmall="true"
                    :small="false"
                    :text="true"
                    icon="mdi-checkbox-marked-outline"
                    :disabled="countSelected == countOptions"
                    @click="control.Reset()"
                />
                
                <cs-btn 
                    :caption="__('Deselectează toate')"
                    :xsmall="true"
                    :small="false"
                    :text="true"
                    icon="mdi-checkbox-blank-outline"
                    :disabled="countSelected == 0"
                    @click="control.Empty()"
                />

            </div>

            <v-sheet
                tile
                :height="height"
                class="transparent"
                :class="{
                    'overflow-y-auto': !! height,
                }"
            >
                <v-checkbox
                    v-for="(option, index) in control.options()"
                    :key="'option-' + index"
                    dense
                    hide-details
                    outlined
                    class="mt-0"
                    :value="option.value"
                    :label="option.text"
                    v-model="control.value"
                >
                </v-checkbox>
            </v-sheet>
        </div>

    </v-sheet>
</template>

<script>
    export default {
        props: {
            control: {required: true},
            outlined: {default: true},
            height: {default: null},
        },

        computed: {
            countSelected() {
                return this.control.value.length;
            },

            countOptions() {
                return this.control.options().length;
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CsCheckFilterControl',        
    }
</script>