import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Observable}       from 'rxjs';

import { Filter, Value, DateValue} from './searchHelperClasses.class';
import {IMyOptions, IMyDateModel} from '../../utils/my-date-picker/interfaces/index';
// import {IMyDateModel} from '../../../utils/my-date-picker/interfaces/my-date-model.interface';
import {Dates} from '../../utils/string-utils.class';
import {FormControl} from "@angular/forms";
import {MatDatepickerInputEvent} from "@angular/material";

@Component({
    selector: 'date-filter',
    template: `
<div  class="uk-input uk-width-medium">
    <mat-select *ngIf="dateValue && dateValue.type!='range' "  name="{{'select_date_type'+filterId}}"   class=" matSelection uk-input"    [(ngModel)]=dateValue.type  [disableOptionCentering]="true" panelClass="matSelectionPanel">
      <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
    </mat-select>
    <div *ngIf="dateValue && dateValue.type=='range' ">
      <table class=" uk-table uk-table-responsive" >
        <tr>
          <td class="uk-padding-remove">
            <mat-select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
              <mat-option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</mat-option>
            </mat-select>
          </td>
<!--          <td>-->
<!--            From-->
<!--          </td>-->
          <td class="uk-padding-remove-vertical" style="width: 112px;">
            <mat-form-field style="max-width: 120px;">
              <input matInput [matDatepicker]="pickerFrom" placeholder="Choose from date" 
                     [formControl]="fromDate" (click)="pickerFrom.open()" (dateChange)="fromDateChanged($event)">
              <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>
              <mat-datepicker #pickerFrom></mat-datepicker>
            </mat-form-field>
          </td>
<!--          <td>-->
<!--            To -->
<!--          </td>-->
          <td class="uk-padding-remove" style="width: 112px;">
            <mat-form-field style="max-width: 120px;">
              <input matInput [matDatepicker]="pickerTo" placeholder="Choose to date" 
                     [formControl]="toDate" (click)="pickerTo.open()" (dateChange)="toDateChanged($event)">
              <mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>
              <mat-datepicker #pickerTo></mat-datepicker>
            </mat-form-field>
          </td>
        </tr>
      </table>
    </div>
</div>
<!--    <div *ngIf="dateValue.type=='range' " class="-row dateFilter" >-->

<!--      <table class=" uk-table uk-table-responsive" >-->
<!--      <tr><td>-->
<!--      <select name="{{'select_date_type'+filterId}}"    [(ngModel)]=dateValue.type >-->
<!--        <option *ngFor="let type of dateValue.types let i = index"  [value]="type" (click)="typeChanged(type)">{{dateValue.typesTitle[i]}}</option>-->
<!--      </select></td>-->
<!--      <td>-->
<!--          From</td><td  style="width: 112px;"><my-date-picker name="from" [options]="myDatePickerOptions"-->
<!--                    [(ngModel)]="from" (dateChanged)="onFromDateChanged($event)" ></my-date-picker>-->
<!--      </td> <td>-->
<!--            To </td><td  style="width: 112px;">     <my-date-picker name="to" [options]="myDatePickerOptions"-->
<!--                            [(ngModel)]="to" (dateChanged)="onToDateChanged($event)" ></my-date-picker></td></tr>-->
<!--      </table>-->
<!--     </div>-->
    `

})

export class DateFilterComponent {

    @Input() dateValue = new DateValue("any");
    @Input() filterId;
    @Input() validDateFrom: boolean = true;
    @Input() validDateTo: boolean = true;

    private myDatePickerOptions: IMyOptions = {
          // other options...
          dateFormat: 'yyyy-mm-dd',
          selectionTxtFontSize: '15px',
          height:'28px',
          width: '100%',
          editableDateField: false,
          showClearDateBtn: false
      };

      // Initialized to specific date (09.10.2018).
      public from;//: Object = { date: { year: 2018, month: 10, day: 9 } };
      public to;//: Object = { date: { year: 2018, month: 10, day: 9 } };
      public fromDate;
      public toDate;

constructor() {
  //this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
}

ngOnInit() {
  this.updateDefaultRangeDates(this.dateValue.from,this.dateValue.to);
}
updateDefaultRangeDates(df:Date,dt:Date){
    //df.setMonth(df.getMonth()-1);
    this.fromDate = new FormControl(df);
    this.toDate = new FormControl(dt);

    //this.from = { date: { year: df.getFullYear(), month: (df.getMonth()+1), day: df.getDate() } };
    //this.to = { date: { year: dt.getFullYear(), month: (dt.getMonth()+1), day: dt.getDate() } };
  }
typeChanged(type:string){
  this.dateValue.setDatesByType(type);
  this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
}

/*
onFromDateChanged(event: IMyDateModel) {
  this.dateValue.from = Dates.getDateFromString(event.formatted);
  this.validDateFrom = true;
}
onToDateChanged(event: IMyDateModel) {
  this.dateValue.to = Dates.getDateFromString(event.formatted);
  this.validDateTo = true;
}
*/

fromDateChanged(event: MatDatepickerInputEvent<Date>) {
  this.dateValue.from = event.value;
  //console.info("FROM: "+Dates.getDateToString(this.dateValue.from));
}

toDateChanged(event: MatDatepickerInputEvent<Date>) {
  this.dateValue.to = event.value;
  //console.info("TO: "+Dates.getDateToString(this.dateValue.to));
}
}