import {Component, ViewChild} from '@angular/core';
import {EditorNodeContract} from '../EditorNode.contract';

@Component({
    selector: 'editor-norm',
    templateUrl: './norm.component.html',
    styleUrls: ['./norm.component.scss'],
})
export class NormComponent extends EditorNodeContract {
    @ViewChild('editable') editable;
    public isFocused = false;
    public initialValue = 'Content editable now...';
    public contents = '';
    private dirtyOverride = false;

    constructor() {
        super();
        console.log('norm compt', this);
        this.contents = this.initialValue;
    }

    public isDirty(): boolean | Promise<boolean> {
        return this.dirtyOverride || this.contents !== this.initialValue;
    }

    onFocusIn(event: MouseEvent) {
        this.isFocused = true;
    }

    onFocusOut(event: MouseEvent) {
        this.isFocused = false;
    }

    documentCommand(cmd: string) {
        // Yes, technically this is deprecated, but it'll be poly-filled if necessary. Bite me.
        document.execCommand(cmd, false, '');
    }

    onContentsChanged(contents: string) {
        const innerHTML = this.editable.nativeElement.innerHTML;
        if ( this.contents !== innerHTML ) {
            this.contents = innerHTML;
        }
    }
}