import {Directive, Component,  ElementRef, Renderer, Provider,forwardRef, AfterViewInit, Input, OnInit, Inject, EventEmitter, Output} from '@angular/core';
import {DyModelDirective} from '../Directives/DyModel'
import {ReadOnlyControl} from "../Interfaces/ReadOnlyControl"
import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'
import { Moment } from '../../../lib/moment/moment';
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR =
    {
        provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => DateRangePickerComponent),
        multi: true
    };

//import {Http, HTTP_PROVIDERS, URLSearchParams} from '@angular/http';

export class DateRange{
    public start: moment.Moment;
    public end:moment.Moment
}

@Component({
    selector: 'BBDateRangePicker',
    //properties: ["value:value"],
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
    //events: ["dyModelChange"],
    template: `
    
            <div  class="form-control" style="">
                <div *ngIf="readOnly" class="standardFieldWidth form-control-static" >{{value}}</div>
                <div *ngIf="!readOnly" class='' >
                    
                    <div class="reportrange" style="">
    <i class="fa fa-calendar"></i>&nbsp;
    <span></span> <i class="fa fa-caret-down"></i>
</div>
                
        </div>
        
    </div>
`
    
})
export class DateRangePickerComponent implements AfterViewInit, ControlValueAccessor, ReadOnlyControl {
    elementRef: ElementRef;
    @Input() readOnly: boolean;

    @Input("model") model: any;
    private datePicker: any;
    private dateRangePickerInput: JQuery;
    private _value: any = '';
    
    @Output() modelChange: EventEmitter<any> = new EventEmitter()
    @Output() DateRangeChanged: EventEmitter<DateRange> = new EventEmitter();
    private _onTouchedCallback: (_: any) => void = (a) => { };

    private _onChangeCallback: (_: any) => void = (a) => { };

    get StartDate(): any { return this.dateRangePickerInput.data('daterangepicker').startDate; };

    //set accessor including call the onchange callback
    set StartDate(v: any) {
        var picker:any = this.dateRangePickerInput.data('daterangepicker');
        picker.setStartDate(v)
        this.cb(this.StartDate, this.EndDate);
        var dr = { start: picker.startDate, end: picker.endDate }
        this.DateRangeChanged.next(dr);

    }

    get EndDate(): any { return this.dateRangePickerInput.data('daterangepicker').endDate; };

    //set accessor including call the onchange callback
    set EndDate(v: any) {
        var picker: any = this.dateRangePickerInput.data('daterangepicker');
        picker.setEndDate(v)
        this.cb(this.StartDate, this.EndDate);
        var dr = { start: picker.startDate, end: picker.endDate }
        this.DateRangeChanged.next(dr);
    }

    get DateRange(): DateRange {
        return { end: <any>this.dateRangePickerInput.data('daterangepicker').endDate, start: <any>this.dateRangePickerInput.data('daterangepicker').startDate };
    }
    //set accessor including call the onchange callback
    set DateRange(v: DateRange) {
        var picker: any = this.dateRangePickerInput.data('daterangepicker');
        picker.setEndDate(v.end)
        picker.setStartDate(v.start)
        this.cb(this.StartDate, this.EndDate);
        var dr = { start: picker.startDate, end: picker.endDate }
        this.DateRangeChanged.next(dr);
    }
    constructor( @Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef; 
        
        //this.httpService = http;
    }

    public cb = (start, end) => {
        var natEle = jQuery(this.elementRef.nativeElement);
        natEle.find('span').html(start.format('MM/DD/YYYY') + ' to ' + end.format('MM/DD/YYYY'));
}

    ngAfterViewInit() {
        var natEle = jQuery(this.elementRef.nativeElement);
        var start = moment().subtract(29, 'days');
        var end = moment();

       
        console.log(natEle.find(".reportrange"));
       this.dateRangePickerInput = natEle.find(".reportrange").daterangepicker({
            startDate: start,
           endDate: end,
           showDropdowns:true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                , 'This Year': [moment().startOf('Year'), moment().endOf('Year')],
                'Last Year': [moment().subtract(1, 'Year').startOf('Year'), moment().subtract(1, 'Year').endOf('Year')]

            },

        }, this.cb).on("apply.daterangepicker", (e,picker) => {

            var dr = { start: picker.startDate, end: picker.endDate }
            this.DateRangeChanged.next(dr);

        });

        this.cb(start, end);

        //var item = natEle.find(".date");
        //this._onTouchedCallback(null);
        //this.datePicker = item.datetimepicker({ format: 'MM/DD/YYYY' }).on("dp.change", (e: any) => {
        //    if (this.datePickerInput == undefined) {
        //        this.datePickerInput = natEle.find("input");
        //    }
        //    var v = item.data("DateTimePicker").date();
        //    this.value = this.datePickerInput.val();
        //        this.modelChange.next(this.value);
        //        this._onChangeCallback(this.value);
        //});
    }
    get value(): any { return this._value; };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this._onChangeCallback(v);
        }
    }
    onTouched() {
        this._onTouchedCallback(null);
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        this._value = value;
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this._onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this._onTouchedCallback = fn;
    }

   
    
}