import {Component, ElementRef, forwardRef, OnDestroy, OnInit} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import 'bootstrap';
import 'summernote';
import 'summernote/lang/summernote-zh-CN.js'

declare const $: any;

@Component({
    selector: 'editor',
    templateUrl: './template.html',
    styleUrls: ['./style.less'],
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => Editor),
        multi: true
    }]
})
export default class Editor implements OnInit, OnDestroy {
    private onValueChange: any;
    private value: any;
    private element: any;
    private editor: any;

    constructor(private el: ElementRef) {
        this.element = $(el.nativeElement);
    }

    ngOnInit(): void {
        const self = this;
        this.editor = this.element.find('.editor');
        this.editor.summernote({
            lang: 'zh-CN',
            height: 400,
            callbacks: {
                onChange: function (contents, $editable) {
                    self.onValueChange && self.onValueChange(contents);
                }
            }
        });
    }

    writeValue(value: any): void {
        this.value = value;
        this.editor.summernote('code', value);
    }

    registerOnChange(changeFn: any): void {
        this.onValueChange = changeFn;
    }

    registerOnTouched(changeFn: any): void {
    }
    ngOnDestroy(): void {
        this.editor.summernote('destroy');
    }
}