import { Component, OnInit } from '@angular/core';
import { FormGroup } from "@angular/forms";
import { FieldConfig } from '../../_models/FieldConfig';
import { NgbDatepickerConfig, NgbDateParserFormatter  } from '@ng-bootstrap/ng-bootstrap';
import { NgbDateCustomParserFormatter } from '../../_helpers/ngbDateParserFormater';

@Component({
  selector: 'app-date',
  template: `
  <div class="form-group row" [formGroup] = "group">
    <label for="field.name" class="col-sm-2">{{ field.label}}</label>
    <input type="text" [formControlName]="field.name"  ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" class="form-control col-sm-9" [ngClass]="{ 'is-invalid' : isValid() }" (dateSelect) = "OnDateSelect($event)"  />
    <ng-container *ngFor="let validation of field.validations;">       
      <div *ngIf="group.controls[field.name].hasError(validation.name) && (group.controls[field.name].dirty || group.controls[field.name].touched)" class="alert alert-danger">
      {{ validation.message }}
      </div>
    </ng-container>
  </div>
  `,
  styles: [],
  providers: [NgbDatepickerConfig, {provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter}] 
})
export class DateComponent implements OnInit {
  field: FieldConfig;
  group: FormGroup;

  constructor(config: NgbDatepickerConfig) { 
    
  }

  ngOnInit() {
  }

  isValid() {
    let c = this.group.controls[this.field.name];
    return (c.dirty || c.touched) && c.invalid;
  }

  OnDateSelect($e){
  }

}