import {Component, Input} from '@angular/core';

import {DateValue} from './searchHelperClasses.class';
import {FormControl} from "@angular/forms";
import { MatDatepickerInputEvent } from "@angular/material/datepicker";

@Component({
    selector: 'date-filter',
    template: `
<div  class="">
    <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' ">
      <div class=" uk-grid uk-margin-remove-left" >
          <div class="uk-padding-remove uk-width-small">
            <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>
          </div>
          <div class="uk-padding-remove uk-margin-small-left" style="">
            <mat-form-field class="uk-width-small">
              <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>
          </div>
          <div class="uk-padding-remove uk-margin-small-left" style="">
            <mat-form-field class="uk-width-small">
              <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>
          </div>
        
      </div>
    </div>
</div>
    `

})

export class DateFilterComponent {

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

      // 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() {
}

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

  }
typeChanged(type:string){
  this.dateValue.setDatesByType(type);
  this.updateDefaultRangeDates(this.dateValue.from, this.dateValue.to);
}


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));
}
}