import { action, computed, IReactionDisposer, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { Doc } from '../../../../fields/Doc';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import './DashFieldView.scss';
import { FormattedTextBox } from './FormattedTextBox';
import { CollectionViewType } from '../../../documents/DocumentTypes';
import { CollectionView } from '../../collections/CollectionView';
import { StrCast } from '../../../../fields/Types';

export class PaintButtonView {
    dom: HTMLDivElement; // container for label and value
    root: any;
    node: any;
    tbox: FormattedTextBox;

    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
        this.node = node;
        this.tbox = tbox;
        this.dom = document.createElement('div');
        this.dom.style.width = node.attrs.width;
        this.dom.style.height = node.attrs.height;
        this.dom.style.position = 'relative';
        this.dom.style.display = 'inline-block';
        this.dom.onkeypress = function (e: any) {
            e.stopPropagation();
        };
        this.dom.onkeydown = function (e: any) {
            e.stopPropagation();
        };
        this.dom.onkeyup = function (e: any) {
            e.stopPropagation();
        };
        this.dom.onmousedown = function (e: any) {
            e.stopPropagation();
        };

        this.root = ReactDOM.createRoot(this.dom);
        this.root.render(<PaintButtonViewInternal node={node} getPos={getPos} width={node.attrs.width} height={node.attrs.height} tbox={tbox} />);
    }
    destroy() {
        setTimeout(() => {
            try {
                this.root.unmount();
            } catch {}
        });
    }
    deselectNode() {
        this.dom.classList.remove('ProseMirror-selectednode');
    }
    selectNode() {
        this.dom.classList.add('ProseMirror-selectednode');
    }
}

interface IPaintButtonViewInternal {
    tbox: FormattedTextBox;
    width: number;
    height: number;
    node: any;
    getPos: any;
}

@observer
export class PaintButtonViewInternal extends ObservableReactComponent<IPaintButtonViewInternal> {
    _reactionDisposer: IReactionDisposer | undefined;
    _textBoxDoc: Doc;

    constructor(props: IPaintButtonViewInternal) {
        super(props);
        makeObservable(this);
        this._textBoxDoc = this._props.tbox.Document;
    }

    return100 = () => 100;
    @computed get _checked() {
        return this._props.tbox.Document.onClick ? true : false;
    }

    onCheckClick = () => {
        const textView = this._props.tbox.DocumentView?.();
        if (textView) {
            const paintedField = 'layout_' + this._props.tbox.fieldKey + 'Painted';
            const layoutFieldKey = StrCast(textView.layoutDoc.layout_fieldKey, 'layout');
            if (textView.layoutDoc.onClick) {
                textView.layoutDoc[paintedField] = undefined;
                textView.layoutDoc.onClick = undefined;
            } else {
                textView.layoutDoc.type_collection = CollectionViewType.Freeform;
                textView.dataDoc[paintedField] = CollectionView.LayoutString(this._props.tbox.fieldKey);
                textView.layoutDoc.layout_fieldKey = paintedField;
                textView.setToggleDetail(layoutFieldKey.replace('layout_', '').replace('layout', ''));
                textView.layoutDoc.layout_fieldKey = layoutFieldKey;
            }
        }
    };

    render() {
        return (
            <div
                className="dashFieldView"
                style={{
                    width: this._props.width,
                    height: this._props.height,
                    pointerEvents: this._props.tbox._props.isSelected() || this._props.tbox.isAnyChildContentActive?.() ? undefined : 'none',
                }}>
                <input type="checkbox" value="paint" checked={this._checked} onChange={e => this.onCheckClick()} />
            </div>
        );
    }
}