<template>
    <div class="tb-hours-date-picker">
        <date-picker v-model="date" :mode="mode" color="gray" />
    </div>
</template>
<script>
import DatePicker from 'v-calendar/lib/components/date-picker.umd';

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

    components: {
        DatePicker,
    },

    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>
