class DatePickerAttribute {
    constructor(key) {
        this.key = key;
        this.realInput = document.getElementById(key + '-data');
        this.timeformat = document.getElementById(key).dataset.timeformat;
        this.dateformat = document.getElementById(key).dataset.dateformat;
        this.timeOnly = document.getElementById(key).dataset.timeOnly;
        this.timeEnabled = document.getElementById(key).dataset.timeenabled;
        this.animation = document.getElementById(key).dataset.animation;

        this.dateInput = $("#" + this.key + "_date");
        this.minutesInput = $("#" + this.key + "_time_minutes");
        this.hoursInput = $("#" + this.key + "_time_hours");

        //Define main variables
        this.day = 1;
        this.month = 1;
        this.year = 2018;
        this.hour = 0;
        this.minute = 0;

        this.initialize();
    }

    initialize() {
        $.widget("ui.timespinner", $.ui.spinner, {
            _format: function (value) {
                if (value <= 9) return ('0' + value);
                else return value;
            }
        });

        console.log('init ' + this.key);

        let that = this;

        this.dateInput.datepicker({
            showOtherMonths: true,
            selectOtherMonths: true,
            showAnim: this.animation,
            showButtonPanel: true, //'{{$attribute->getButtonBar()}}',
            changeMonth: true, //'{{$attribute->getChangeMonth()}}',
            changeYear: true, //'{{$attribute->getChangeYear()}}',
            dateFormat: this.dateformat, //'{{$attribute->getDateFormat()}}',
            onSelect: function () {
                that.dateChanged();
            }
        });

        //Retrieve real input value and validate that it has all properties we need
        let date = this.getDateObjectFromInput(this.realInput);

        //Retrieve the date format from the attribute and validate it.
        let dateFormat = this.dateformat;

        // console.log(dateFormat);
        let dateToUse = this.makeDateStringFromDateAndFormat(dateFormat, date);

        if (this.timeEnabled) {
            this.hoursInput.timespinner({
                min: 0,
                max: 23,
                change: function (event, ui) {
                    let showValue = $(this).timespinner("value");
                    if (showValue <= 9) return $(this).timespinner("value", ('0' + showValue));
                }
            });

            //TIME PICKER - MINUTES
            this.minutesInput.timespinner({
                min: 0,
                max: 59,
                change: function (event, ui) {
                    let showValue = $(this).timespinner("value");
                    if (showValue <= 9) return $(this).timespinner("value", ('0' + showValue));
                }
            });

            //Update the real input value with the correct data
            // console.log('Initializing hour spinner with value: '+realInputValue.hour);
            this.hoursInput.timespinner('value', date.getHours());

            // console.log('Initializing minute spinner with value: '+realInputValue.minute);
            this.minutesInput.timespinner('value', date.getMinutes());

            // Update input time when losing focus of the hour or minute input field
            $(this.hoursInput).focusout(function () {
                that.timeChanged();
            });
            $(this.minutesInput).focusout(function () {
                that.timeChanged();
            });
        }

        if (!this.timeOnly) {
            this.dateInput.datepicker("setDate", dateToUse);
            this.dateChanged();
        }
    }

    /**
     * Time has changed
     */
    timeChanged() {
        this.hour = this.hoursInput.timespinner('value') || 0;
        this.minute = this.minutesInput.timespinner('value') || 0;
        this.updateRealValue();
    }

    /**
     * date has changed
     */
    dateChanged() {
        console.log('dateChanged', this.dateInput.datepicker());
        let date = this.dateInput.datepicker('getDate');

        this.day = date.getDate();
        this.month = date.getMonth() + 1; //We need to do this because javascript months are zero based
        this.year = date.getFullYear();
        if (this.timeEnabled) {
            this.hour = this.hoursInput.timespinner('value') || 0;
            this.minute = this.minutesInput.timespinner('value') || 0;
        }

        console.log(this.dateInput.attr('id'), 'Date changed to:' + this.day + '/' + this.month + '/' + this.year + '  ' + this.hour + ':' + this.minute);
        this.updateRealValue();
    }

    /**
     * Updates the hidden input that holds the value that is pushed to the database
     */
    updateRealValue() {
        //Make sure our variables are set in any case
        // console.log('hours: '+ hour);
        // console.log('minutes: '+ minute);

        this.realInput.setAttribute('value', JSON.stringify({
            year: this.year,
            month: this.month,
            day: this.day,
            hour: this.hour,
            minute: this.minute,
            second: 0
        }));

        // console.log('Updated real input: ' + this.realInput.value);
    }

    /**
     * Looks at an input value and if it is a json object formatted like below, returns a date with those values in the json.
     * Else it wil log an error and set the date to now
     */
    getDateObjectFromInput(inputElement) {
        let inputElementValue = inputElement.value;
        let date = new Date();
        if (inputElementValue) {
            // console.log('initializing with real input value: ' + inputElementValue);
            let json = JSON.parse(inputElementValue);

            if (json.hasOwnProperty('year') && json.hasOwnProperty('month') && json.hasOwnProperty('day') && json.hasOwnProperty('hour') && json.hasOwnProperty('minute') && json.hasOwnProperty('second')) {
                date = new Date(json.year, json.month - 1, json.day, json.hour, json.minute, json.second)
            } else {
                console.error('The input element did not have a json value correctly specified. It should have all the properties: year, month, day, hour, minute, second. but did not have them all. Returning a date object of "now"');
            }
        } else {
            console.error('The input element did not have json value specified. Returning a date object of "now"');
        }

        return date;
    }

    /**
     * Replaces the dd mm and yy values in the dateformat respectively with the day, month and year (4 digits) value.
     * For use with the datePicker setDate method
     *
     * dateFormat example: dd/mm/yy, date is a javascript date object.
     * @param dateFormat string
     * @param date Date
     */
    makeDateStringFromDateAndFormat(dateFormat, date) {
        let formatSplitted = dateFormat.split('/');
        if (formatSplitted.length !== 3) {
            console.error('datePicker.blade.php got a date format from the DatePicker attribute that was not valid. Stopping initialisation: ' + dateFormat);
            return;
        } else {
            if (formatSplitted.indexOf('dd') === -1 || formatSplitted.indexOf('mm') === -1 || formatSplitted.indexOf('yy') === -1) {
                console.error('datePicker.blade.php got a date format from the DatePicker attribute that was not valid. It should contain the values dd, mm, yy. Stopping initialisation: ' + dateFormat);
                return;
            }
        }

        //Format the date for the date picker and insert in in the datepicker
        return dateFormat.replace('dd', date.getDate()).replace('mm', date.getMonth() + 1).replace('yy', date.getFullYear());
    }

}