import {Component, Input, OnDestroy, OnInit} from "@angular/core";
import {Option} from "../../../utils/indicator-utils";

@Component({
  selector: '[dashboard-input]',
  template: `
    <div class="md-input-wrapper"
         [class.md-input-filled]="formControl.value !== ''"
         [class.md-input-focus]="formControl.touched"
         [class.md-input-wrapper-danger]="formControl.invalid && formControl.dirty">
      <label>{{label}}</label>
      <input *ngIf="type === 'text' || type === 'number'" [type]="type" class="md-input"
             focus-directive [formInput]="formControl"
             [formControl]="formControl"
             [class.md-input-danger]="formControl.invalid && formControl.dirty">
      <textarea *ngIf="type === 'textarea'" type="text" class="md-input no_autosize"
                focus-directive [formInput]="formControl"
                [rows]="rows" [formControl]="formControl"></textarea>
      <span class="md-input-bar"></span>
      <select *ngIf="type === 'select'" class="md-input uk-select"
             focus-directive [formInput]="formControl"
             [formControl]="formControl"
             [class.md-input-danger]="formControl.invalid && formControl.dirty">
        <option [value]="option.value" *ngFor="let option of options">
          {{option.label}}
        </option>
      </select>
    </div>`
})
export class InputComponent implements OnInit, OnDestroy {
  @Input('formInput') formControl: any;
  @Input('type') type: string = 'text';
  @Input('label') label: string;
  @Input('rows') rows: number = 3;
  @Input('options') options: Option[];

  constructor() {
  }

  ngOnInit(): void {
  }

  ngOnDestroy(): void {
  }
}