<template>
    <v-menu
        v-model="visible"
        :close-on-content-click="false"
        :nudge-top="24"
        transition="scale-transition"
        offset-y
        min-width="256"
    >
        <template v-slot:activator="{ on, attrs }">

            <v-text-field
                :id="control.id"
                :hide-details="control.hideDetails"
                :dense="control.dense"
                :outlined="control.outlined"
                :clearable="control.clearable"
                :error-messages="localeErrors"
                :class="{
                    'cs-control': true,
                    'cs-date-range-box': true,
                }"
                append-icon="mdi-calendar"
                readonly
                :persistent-hint="control.persistentHint"
                :hint="control.hint"

                v-bind="attrs"
                v-on="on"

                v-model="localValue"

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

        <v-date-picker
            :value="value"
            no-title
            range
            :first-day-of-week="1"
            :locale="$locale"
            @input="OnInputDatePicker"
        >
        </v-date-picker>
    </v-menu>
</template>

<script>
    import RandomString from '@CsFunc/global/RandomString';

    export default {
        props: {
            control: {required: true},

            value: {required: true},

            errors: {default: null},
        },

        data: () => ({
            visible: false,
        }),

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

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

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

        methods: {
            ToHumanRange(value) {
                if(! _.isArray(value))
                {
                    return '';
                }
                let r = _.map(value, d => this.ToDate(d));
                return r.join(' - ');
            },

            OnInputDatePicker(value) {
                this.$emit('focus');
                this.localValue = value;
                if(value.length == 2)
                {
                    if(value[0] > value[1])
                    {
                        let d = value[0];
                        value[0] = value[1];
                        value[1] = d;
                    }
                    this.visible = false;
                    
                }

            },
        },

        created() {
            this.control.id = 'cs-date-range-box-' + RandomString(64); 
        },

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

        name: 'CsDateIntervalBox',     
        
    }
</script>