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


@Component({
  selector: 'border',
  template: `
    <div class="uk-grid uk-margin-remove">
      <div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Radius:</div>
      <div class="uk-width-2-3 uk-padding-remove-left">
        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />
      </div>
    </div>
    <div class="uk-grid uk-margin-remove">
      <div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Width:</div>
      <div class="uk-width-2-3 uk-padding-remove-left">
        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" />
      </div>
    </div>
    <div class="uk-grid uk-margin-remove">
      <div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Style:</div>
      <div class="uk-width-2-3 uk-padding-remove-left">
<!--        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="style" (ngModelChange)="borderChanged()"/>-->

        <select [(ngModel)]="style" name="{{'select_type_'}}"
                class="uk-select uk-width-small" (ngModelChange)="borderChanged()">
          <option [value]="'solid'" >solid</option>
          <option [value]="'dotted'" >dotted</option>
          <option [value]="'dashed'" >dashed</option>
        </select>

      </div>
    </div>
  `
})

export class BorderComponent implements OnInit {
  @Input() radius:number =0;
  @Input() width:number =0;
  @Input() style = 'solid';
  // @Input() addMargin: boolean = false;
  @Output() borderChange = new EventEmitter();


  constructor() {
  }


  ngOnInit() {
  }

  borderChanged() {
    this.borderChange.emit({radius:this.radius, width:this.width, style:this.style});
  }


}