import {Component, Output, Input, EventEmitter, OnInit} from "@angular/core";
declare var jQuery: any;
declare var Modernizr: any;
declare var moment: any;
@Component({
    selector: 'date-picker',
    templateUrl: './date-picker.component.html',
    styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent implements OnInit {

    @Output() dateUpdated = new EventEmitter();
    private _date: Date;

    @Input('date')
    set date(newDate) {
        this._date = newDate;
        if (Modernizr.touch && newDate) {
            jQuery("#datepicker")[0].value = moment(newDate).format('MM-DD-YYYY');
        }
    }

    constructor() {
    }

    ngOnInit() {
        let that = this;
        if (Modernizr.touch && Modernizr.inputtypes.date) {
            jQuery("#datepicker").attr('type', 'date');
            jQuery("#datepicker").change(function ($event) {
                that.dateUpdated.emit(moment($event.target.value,"DD/MM/YYYY").format('YYYY-MM-DD'));
            });
        } else {
            jQuery("#datepicker").datepicker({
                autoclose: true,
                todayHighlight: true,
                format: "dd/mm/yyyy"
            });
            jQuery("#datepicker").datepicker().on("changeDate", function ($event) {
                that.dateUpdated.emit(moment($event.target.value,"DD/MM/YYYY").format('YYYY-MM-DD'));
            });
            if (this._date) {
                jQuery("#datepicker").datepicker('update', this._date);
            }
        }
    }
}