import { Component, Input, Output, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
import { RdLib } from '../../base/rdLib';
import { RdComponent } from '../../base/rdComponent';
import { ScriptLoaderService } from "../../library/script-loader.service";

declare const tinymce: any;

@Component({
  selector: 'rd-text-editor',
  template: `
    <textarea contentEditable="true" style="height:29em"><p>{{model}}</p></textarea>
    <div class="text-center">
      <rd-button [rd-text]="btnText" rd-icon="fas fa-save" rd-color="green" (rd-click)="contentEvent.emit(editor.getContent())"></rd-button>
    </div>
  `
})
export class RdTextEditor extends RdComponent implements OnChanges, OnDestroy {
  constructor(private script: ScriptLoaderService) {
    super();
    this.script.load(['./assets/js/tinymce/tinymce.min.js']).then(() => {
      tinymce.init({
        selector: 'textarea',
        entity_encoding: "raw",
        height: "29em",
        menubar: true,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen hr',
          'insertdatetime media table contextmenu paste',
          'wordcount'
        ],
        toolbar: 'bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
        table_toolbar: "tableprops cellprops tabledelete | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol",
        powerpaste_allow_local_images: true,
        powerpaste_word_import: 'prompt',
        powerpaste_html_import: 'prompt',
        // content_css: [
        //   '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        //   '//www.tinymce.com/css/codepen.min.css'
        // ],

        setup: editor => {
          this.editor = editor;
          editor.on('init', () => {
            if (this.model) this.editor.setContent(this.model, { format: 'raw' });
          });

          // editor.on('change', (e) => {
          //   if (editor.getContent()) this.contentEvent.emit(editor.getContent());
          //   else RdLib.screenOperations.toastr.warning(this.translate('İçerik Boş Bırakılamaz'))
          // });
        }
      });
      if (this.lang != "en_US") tinymce.overrideDefaults({ language: this.lang });
    });
  }

  @Input("rd-model") model;
  @Input("rd-lang") lang = "en_US";
  
  @Output("rd-content") contentEvent: EventEmitter<any> = new EventEmitter<any>();

  editor;
  btnText = RdLib.localization.translateEn("Save");

  ngOnChanges() {
    if (!this.model) {
      this.editor ? this.editor.setContent("") : null;
      return;
    }

    if (this.editor) this.editor.setContent(this.model);
    else tinymce.init({});
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }
}