import {Component} from '@angular/core';
import {PluginBaseComponent} from "../../utils/base-plugin.component";

export class PluginTest{
  title:string ="Test Plugin";
  description: string = "Lorem ipsum";
  numberOn:boolean = true;
  constructor() {
    console.log(this)
  }
}
@Component({
  selector: 'plugin-test',
  template: `
     
    <div *ngIf="pluginDefaultObject">
      <div [class.fieldEditMode]="editMode">
        <ng-container *ngIf="editMode">
          <plugin-field-edit [value]="pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title" 
                             type="text" field="title"  (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" ></plugin-field-edit>
        </ng-container>
        
        <h1 [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'title')"> 
            {{pluginObject && pluginObject.title?pluginObject.title:pluginDefaultObject.title}} </h1>
        
        
      </div>
      <div [class.fieldEditMode]="editMode">
        <ng-container *ngIf="editMode">
          <plugin-field-edit [value]="pluginObject && pluginObject.description?pluginObject.description:pluginDefaultObject.description" 
                             type="text" field="description"  (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" ></plugin-field-edit>
        </ng-container>
        
        <p [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'description')">
          {{pluginObject && pluginObject.description?pluginObject.description:pluginDefaultObject.description}} </p>
      </div>
      <div [class.fieldEditMode]="editMode && !editTemplate">
        <ng-container *ngIf="editMode && !editTemplate">
          <plugin-field-edit [value]=" pluginObject.numberOn"
                             type="boolean" field="numberOn"  (editClicked)="pluginEditEvent = $event" (changed)="valueChanged($event)" >
          </plugin-field-edit>
        </ng-container>
        <p *ngIf="showOnOffBlock('numberOn')" 
           [class.uk-invisible]=" (pluginEditEvent && pluginEditEvent.field == 'numberOn')">58K </p>
      </div>
      
    </div> 
  
  `,


})
export class PluginTestComponent extends PluginBaseComponent{

  get pluginObject():PluginTest{
    return this.plugin?this.plugin.object:null;
  }
  get pluginDefaultObject():PluginTest{
    return this.pluginTemplate?this.pluginTemplate.object:null;
  }
  constructor() {
    super()

  }
  ngOnInit(): void {
    if(this.pluginTemplate && (!this.pluginDefaultObject || !this.pluginDefaultObject.title)){
      this.pluginTemplate.object = new PluginTest();
    }
  }

}