import { Component } from '@angular/core'
import { FormGroup } from '@angular/forms'
import { ButtonGroup, Field } from '@tabler/angular-forms'

@Component({
  selector: 'app-forms-demo',
  template: `
    <div class="card">
      <div class="card-header d-block py-4">

        <ui-button class="float-right"
                   size="sm" color="outline-primary"
                   icon="fa fa-bug"
                   (action)="debug()">
        </ui-button>

        <h3 class="card-title pt-1">Forms demo</h3>
      </div>
      <div class="card-body">

        <div class="row">
          <div class="col-8">

            <ui-form [form]="form"
                     [fields]="fields"
                     [model]="model"
                     [buttons]="buttons"
                     (action)="handleAction($event)">
            </ui-form>

          </div>
          <div class="col-4">
            <ui-button color="primary"
                       size="sm"
                       (action)="debug()">
              <i class="fa fa-bug"></i>
            </ui-button>
            <button class="btn btn-outline-primary" (click)="debug()">
              <i class="fa fa-bug"></i>
            </button>
            <pre>{{ model | json }}</pre>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [],
})
export class FormsDemoComponent {
  public form = new FormGroup({})
  public buttons = ButtonGroup.saveAndClose()
  public fields = [
    Field.input('name', {
      label: 'Name',
    }),
    Field.inputHorizontal('name', {
      label: 'Name',
    }),
    Field.email('email', {
      label: 'Email',
    }),
  ]
  public model = {}

  handleAction({ type, payload }) {
    console.log('handleAction')
    console.log(type, payload)
  }

  debug() {
    console.log('this.form', this.form)
    console.log('this.fields', this.fields)
    console.log('this.model', this.model)
  }
}