import {Component, EventEmitter, Input, Output} from '@angular/core';
import {PluginEditEvent} from "./base-plugin.form.component";


@Component({
  selector: 'plugin-field-edit',
  template: `
    <ng-container *ngIf="type=='boolean'">
      <mat-slide-toggle [checked]="value" (change)="updateObject($event.checked)"></mat-slide-toggle>
    </ng-container>
    <ng-container *ngIf="type!='boolean'">

<!--      <a *ngIf="!editingModeOn" class="uk-float-right" (click)=" editClicked.emit({field: field, type: type}); editingModeOn = true ">Edit</a>-->
      <ng-container *ngIf="editingModeOn">
<!--        <a *ngIf="editingModeOn" class="uk-float-right" (click)="editClicked.emit(null); editingModeOn = false ">close</a>-->
<!--        <br>-->

        <!--<input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
               [ngModel]="getSelectedPages().length ==checkboxes.length"/>-->
        <input  *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)"   type="checkbox"   class="uk-checkbox">
        <div  *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text"  (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
        <!--<div  *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
        <div  *ngIf="type == 'HTML'"  class="uk-width-1-1">
          <ckeditor  [readonly]="false"
                     debounce="500"
                     [formControl]="value"
                     [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]',
                                         removeButtons:  'Save,NewPage,DocProps,Preview,Print,' +
                                                         'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
                                                         'CreateDiv,Flash,PageBreak,' +
                                                         'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
                                         extraPlugins: 'divarea'}">
          </ckeditor>
        </div>-->
      </ng-container>
    </ng-container>
    
  `,


})
export class PluginFieldEditComponent {
 @Input() type;
 @Input() value;
 @Input() field;
 @Input() placeholder;
 @Output() editClicked:EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
 @Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter()
 editingModeOn: boolean = true;

 updateObject(value){
   console.log(value)
   this.value = value;
   this.changed.emit({field:this.field, value: this.value, type: this.type});
 }
}