<template>
    <v-checkbox
        ref="Control"
        :hide-details="control.hideDetails"
        :dense="control.dense"
        :outlined="control.outlined"
        :clearable="control.clearable"
        :error-messages="localeErrors"
        :false-value="0"
        :true-value="1"
        :persistent-hint="control.persistentHint"
        :hint="control.hint"
        :name="control.name"
        :color="control.color"
        :checked="localValue == 1 ? 'checked' : null"
        
        v-model="localValue"

        class="ma-0 pa-0"

        @focus="$emit('focus')"
        @blur="$emit('blur')"
    >
        <template #label>
            
            <cs-label 
                :control="control"
            />
        </template>
    </v-checkbox>
</template>

<script>
    export default {

        props: {
            control: {required: true},

            value: {required: true},

            errors: {default: null},
        },

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

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

            localeErrors() {
                return _.map(this.errors, error => this.__(error))
            }
        },

        methods: {
            Focus() {
                setTimeout( () => {
                    this.$refs.Control.focus();
                }, 1)
            }
        },

        components: {
            CsLabel: require('./../labels/CsLabel').default,
        },

        name: 'CsCheckBox',
    }
</script>