<template>
    <div class="vdp-datepicker" :class="wrapperClass">
        <div :class="{'input-group col-md-12' : bootstrapStyling}">
            <span class="vdp-datepicker__calendar-button" :class="{'input-group-addon' : bootstrapStyling}"
                  v-if="calendarButton" @click="showCalendar()"><i :class="calendarButtonIcon"><span
                    v-if="calendarButtonIcon.length === 0">&hellip;</span></i></span>
            <input
                    :type="inline ? 'hidden' : 'text'"
                    :class="[ inputClass, { 'form-control' : bootstrapStyling } ]"
                    :name="name"
                    :id="id"
                    @click="showCalendar()"
                    :value="formattedValue"
                    :placeholder="placeholder"
                    :clear-button="clearButton"
                    :disabled="disabledPicker"
                    :required="required"
                    readonly>
            <span class="vdp-datepicker__clear-button" :class="{'input-group-addon' : bootstrapStyling}"
                  v-if="clearButton && selectedDate" @click="clearDate()"><i :class="clearButtonIcon"><span
                    v-if="calendarButtonIcon.length === 0">&times;</span></i></span>
        </div>
        <!-- Day View -->
        <div class="vdp-datepicker__calendar" v-show="showDayView" v-bind:style="calendarStyle">
            <header>
                <span
                        @click="previousMonth"
                        class="prev"
                        v-bind:class="{ 'disabled' : previousMonthDisabled(currDate) }">&lt;</span>
                <span @click="showMonthCalendar" class="up">{{ currMonthName }} {{ currYear }}</span>
                <span
                        @click="nextMonth"
                        class="next"
                        v-bind:class="{ 'disabled' : nextMonthDisabled(currDate) }">&gt;</span>
            </header>
            <span class="cell day-header" v-for="d in daysOfWeek">{{ d }}</span>
            <span class="cell day blank" v-for="d in blankDays"></span><!--
            --><span class="cell day"
                     v-for="day in days"
                     track-by="timestamp"
                     v-bind:class="{ 'selected':day.isSelected, 'disabled':day.isDisabled, 'highlighted': day.isHighlighted, 'today': day.isToday}"
                     @click="selectDate(day)">{{ day.date }}</span>
        </div>

        <!-- Month View -->
        <div class="vdp-datepicker__calendar" v-show="showMonthView" v-bind:style="calendarStyle">
            <header>
                <span
                        @click="previousYear"
                        class="prev"
                        v-bind:class="{ 'disabled' : previousYearDisabled(currDate) }">&lt;</span>
                <span @click="showYearCalendar" class="up">{{ getYear() }}</span>
                <span
                        @click="nextYear"
                        class="next"
                        v-bind:class="{ 'disabled' : nextYearDisabled(currDate) }">&gt;</span>
            </header>
            <span class="cell month"
                  v-for="month in months"
                  track-by="timestamp"
                  v-bind:class="{ 'selected': month.isSelected, 'disabled': month.isDisabled }"
                  @click.stop="selectMonth(month)">{{ month.month }}</span>
        </div>

        <!-- Year View -->
        <div class="vdp-datepicker__calendar" v-show="showYearView" v-bind:style="calendarStyle">
            <header>
                <span @click="previousDecade" class="prev"
                      v-bind:class="{ 'disabled' : previousDecadeDisabled(currDate) }">&lt;</span>
                <span>{{ getDecade() }}</span>
                <span @click="nextDecade" class="next"
                      v-bind:class="{ 'disabled' : nextMonthDisabled(currDate) }">&gt;</span>
            </header>
            <span
                    class="cell year"
                    v-for="year in years"
                    track-by="timestamp"
                    v-bind:class="{ 'selected': year.isSelected, 'disabled': year.isDisabled }"
                    @click.stop="selectYear(year)">{{ year.year }}</span>
        </div>

    </div>
</template>

<script>
    import Datepicker from 'vuejs-datepicker';
    import DateUtils from 'vuejs-datepicker/src/utils/DateUtils.js'

    export default{
        extends: Datepicker, // vue@1.0.22+

        props: {
            val: {
                value: String,
                default: null
            },
            bootstrapStyling: {
                value: Boolean,
                default: true
            }
        },
        data () {
            return {
                /*
                 * Vue cannot observe changes to a Date Object so date must be stored as a timestamp
                 * This represents the first day of the current viewing month
                 * {Number}
                 */
                currDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime(),
                /*
                 * Selected Date
                 * {Date}
                 */
                selectedDate: null,
                /*
                 * Flags to show calendar views
                 * {Boolean}
                 */
                showDayView: false,
                showMonthView: false,
                showYearView: false,
                /*
                 * Positioning
                 */
                calendarHeight: 0
            }
        },
        computed: {
            formattedValue () {
                if (!this.selectedDate) {
                    console.log( "setting it to " +
                        this.val
                    );
                    return this.val
                }
                return DateUtils.formatDate(new Date(this.selectedDate), this.format, this.translation)
            },
        }
    }
</script>