import {Directive, Component, ElementRef, Renderer, Input, OnInit, Inject, EventEmitter, Output, AfterViewChecked, ViewChild, AfterViewInit, forwardRef} from '@angular/core';
import {UndefinedToEmptyPipe} from "../Pipes/Pipes"
import {DxHtmlEditorModule,DxToolbarComponent, DxHtmlEditorComponent} from 'devextreme-angular'
import * as ClassicEditor from 'bbCkEditor/build/ckeditor';
//import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import PageBreak from '@ckeditor/ckeditor5-page-break/src/pagebreak';
//import tinymce from 'tinymce/tinymce';
import dxHtmlEditor from 'devextreme/ui/html_editor';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
//tinymce = window.tinymce;
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR =
{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DyTextEditorComponent),
    multi: true
};
@Component({
    selector: 'dyTextEditor',
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],
    template: `<ckeditor [editor]="Editor" [config]="config" [(ngModel)]="model" (blur)="focusOut($event)" (ready)="onReady($event)"></ckeditor>`,
    

})
export class DyTextEditorComponent implements AfterViewInit, ControlValueAccessor, AfterViewChecked {
    //<div id="{{id}}">{{model}}</div>
    elementRef: ElementRef;
    public Editor: ClassicEditor = ClassicEditor;
    public width;
    public placeholder;
    private _id: string;
    private _model: string;
    private _onTouchedCallback: (_: any) => void = (a) => { };
    //private pb = PageBreak;
    public config = {
        fontFamily: { supportAllValues:true},
        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                '|',
                'outdent',
                'indent',
                'pageBreak',
                'alignment',
                '|',
                'imageUpload',
                'blockQuote',
                'insertTable',
                'mediaEmbed',
                'undo',
                'redo',
                '|',
                'fontBackgroundColor',
                'fontColor',
                'fontFamily',
                'fontSize',
                'highlight',
                'removeFormat',
                'strikethrough',
                'underline',
                '|',
                'htmlEmbed'
            ]
        },
        language: 'en',
        image: {
            toolbar: [
                'imageTextAlternative',
                'imageStyle:inline',
                'imageStyle:block',
                'imageStyle:side'
            ]
        },
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells',
                'tableCellProperties',
                'tableProperties'
            ]
        },
        licenseKey: '',

    };//{ plugins: [PageBreak] };
    private _onChangeCallback: (_: any) => void = (a) => { };
private hasInit:boolean = false;
    
    @Output() EditorShow: EventEmitter<any> = new EventEmitter<any>();
    @Output() EditorHide: EventEmitter<any> = new EventEmitter<any>();
    @ViewChild("htmlcont", { static: true }) htmlControl: any;
    @Input() set model(value) {
        if (value == null || value == undefined) {
            this._model = "";
        }
        else {
            this._model = value;
        }

         
        
    };
     get model(): any{

        return this._model
    };
    @Input() set id(value) {
        //if (this.htmlControl) {
        //    this.htmlControl.value = value;
        //}
        this._id = value;



    }
    get id() {
        if (this._id == undefined) {
            var idx = $("dyTextEditor").index(this.elementRef.nativeElement);
            this._id = "dyautoTextEditorField" + idx + new Date().getSeconds() + new Date().getMilliseconds();

        }
        return this._id;

    }
    @Output() modelChange: EventEmitter<any> = new EventEmitter()
    @Input() height = "200px";
    @Output() Changed: EventEmitter<any> = new EventEmitter()
    constructor( @Inject(ElementRef) elementRef: ElementRef) {
        this.elementRef = elementRef;

    }
    public alreadyRenederd = false;
    ngAfterViewChecked(): void {
        //var editor: DxHtmlEditorComponent = <DxHtmlEditorComponent>this.htmlControl;
        ////console.log(this.elementRef.nativeElement.offsetParent);
        //if (this.elementRef.nativeElement.offsetParent != null && this.alreadyRenederd == false) {
        //    this.alreadyRenederd = true;
        //   // this.repaint();

        //}
       // this.
    }

    public onReady(editor) {
        editor.ui.getEditableElement().parentElement.insertBefore(
            editor.ui.view.toolbar.element,
            editor.ui.getEditableElement()
        );
    }
    ngAfterViewInit(): void {
       // var editor: DxHtmlEditorComponent = <DxHtmlEditorComponent>this.htmlControl;
       // editor.instance.repaint()
       // editor.visibleChange.subscribe(() => {
       //     console.log(this.elementRef.nativeElement.offsetParent);
       // });
    }
    
    public focusOut = (e) => {
        console.log("focus out");
        console.log(e)
        this._model = e.editor.getData();
        this.Changed.emit(this.model);
        this.modelChange.next(this.model);
        
      //  this.model = e;
    }
    get value(): any { return this._model; };

    //set accessor including call the onchange callback
    set value(v: any) {

        if (v !== this._model) {
            this._model = v;
            this._onChangeCallback(v);
            //  console.log("value changed to " + v);
        }
    }
    onTouched() {
        this._onTouchedCallback(null);
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        this._model = value;
        this._onChangeCallback(value);
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this._onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this._onTouchedCallback = fn;
    }





}