<template>
    <div class="tb-hours-date-picker">
        <v-date-picker
            v-model="date"
            :mode="mode"
            color="gray"
            :popover="{ visibility: 'focus' }"
        >
            <div class="tb-input-wrapper" slot-scope="{ inputProps, inputEvents }">
                <input
                    class="tb-input"
                    type="text"
                    v-bind="inputProps"
                    v-on="inputEvents"
                >
                <svg class="tb-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="#icon-calendar" />
                </svg>
            </div>
        </v-date-picker>
    </div>
</template>
<script>
import VDatePicker from 'v-calendar/lib/components/date-picker.umd';

export default {
    props: {
        value: {
            type: Date,
            default: null,
        },
    },

    components: { VDatePicker },

    data: () => ({
        date: new Date(),
        mode: 'single',
    }),

    created () {
        if (this.value) {
            this.date = this.value instanceof Date ? this.value : new Date(this.value);
        } else {
            this.date = new Date();
        }
    },

    watch: {
        date(value) {
            if (!value) {
                this.date = new Date();
                return;
            }

            this.$emit('input', value);
        },

        value: {
            handler(value) {
                this.date = value;
            },
            immediate: true,
        },
    },
};
</script>
