import ngModule from '../../module';
import Field from '../field';
import {Flatpickr} from '../../vendor';
import './style.scss';

class DatePicker extends Field {
    constructor($element, $scope, $compile, $translate) {
        super($element, $scope, $compile);
        this.$translate = $translate;

        this.input = $compile(`<input type="text"></input>`)($scope)[0];
        this.initPicker();
    }

    get field() {
        return super.field;
    }

    set field(value) {
        super.field = value;

        let date = value;
        if (date && !(date instanceof Date))
            date = new Date(date);

        this.picker.setDate(fixDate(date));
    }

    set options(value) {
        let selectedDates = this.picker.selectedDates || [];
        this._options = value;
        this.initPicker();
        this.picker.setDate(selectedDates[0]);
    }

    get options() {
        return this._options;
    }

    initPicker() {
        let locale = this.$translate.use();
        let format = locale == 'es' ? 'd-m-Y' : 'Y-m-d';

        let options = this.options || {};
        let defaultOptions = {
            locale: locale,
            dateFormat: format,
            enableTime: false,
            disableMobile: true,
            onValueUpdate: () => this.onValueUpdate()
        };

        if (options.enableTime) {
            Object.assign(defaultOptions, {
                dateFormat: `${format} h:i`,
                time_24hr: true
            });
        }

        let mergedOptions = Object.assign({},
            defaultOptions,
            options
        );

        if (this.picker) this.picker.destroy();
        this.picker = new Flatpickr(this.input, mergedOptions);
    }

    onValueUpdate() {
        let date = null;

        if (this.picker.selectedDates.length)
            date = this.picker.selectedDates[0];

        super.field = fixDate(date, -1);
        this.$.$applyAsync();
    }

    $onDestroy() {
        this.picker.destroy();
    }
}
DatePicker.$inject = ['$element', '$scope', '$compile', '$translate'];

ngModule.vnComponent('vnDatePicker', {
    controller: DatePicker,
    bindings: {
        options: '<?'
    }
});

function fixDate(date, mult = 1) {
    if (date) {
        let offset = date.getTimezoneOffset() * 60000;
        date.setTime(date.getTime() + (offset * mult));
    }

    return date;
}