import EquationEditor from 'equation-editor-react';
import { IReactionDisposer } from 'mobx';
import { observer } from 'mobx-react';
import { TextSelection } from 'prosemirror-state';
import * as ReactDOM from 'react-dom';
import { Doc } from '../../../../fields/Doc';
import { StrCast } from '../../../../fields/Types';
import './DashFieldView.scss';
import { FormattedTextBox } from './FormattedTextBox';
import React = require('react');

export class EquationView {
    dom: HTMLDivElement; // container for label and value

    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
        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.onmousedown = function (e: any) {
            e.stopPropagation();
        };

        ReactDOM.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />, this.dom);
        (this as any).dom = this.dom;
    }
    _editor: EquationEditor | undefined;
    setEditor = (editor?: EquationEditor) => (this._editor = editor);
    destroy() {
        ReactDOM.unmountComponentAtNode(this.dom);
    }
    setSelection() {
        this._editor?.mathField.focus();
    }
    selectNode() {
        this._editor?.mathField.focus();
    }
    deselectNode() {}
}

interface IEquationViewInternal {
    fieldKey: string;
    tbox: FormattedTextBox;
    width: number;
    height: number;
    getPos: () => number;
    setEditor: (editor: EquationEditor | undefined) => void;
}

@observer
export class EquationViewInternal extends React.Component<IEquationViewInternal> {
    _reactionDisposer: IReactionDisposer | undefined;
    _textBoxDoc: Doc;
    _fieldKey: string;
    _ref: React.RefObject<EquationEditor> = React.createRef();

    constructor(props: IEquationViewInternal) {
        super(props);
        this._fieldKey = this.props.fieldKey;
        this._textBoxDoc = this.props.tbox.props.Document;
    }

    componentWillUnmount() {
        this._reactionDisposer?.();
    }
    componentDidMount() {
        this.props.setEditor(this._ref.current ?? undefined);
    }

    render() {
        return (
            <div
                className="equationView"
                onKeyDown={e => {
                    if (e.key === 'Enter') {
                        this.props.tbox.EditorView!.dispatch(this.props.tbox.EditorView!.state.tr.setSelection(new TextSelection(this.props.tbox.EditorView!.state.doc.resolve(this.props.getPos() + 1))));
                        this.props.tbox.EditorView!.focus();
                        e.preventDefault();
                    }
                    e.stopPropagation();
                }}
                onKeyPress={e => e.stopPropagation()}
                style={{
                    position: 'relative',
                    display: 'inline-block',
                    width: this.props.width,
                    height: this.props.height,
                    background: 'white',
                    borderRadius: '10%',
                    bottom: 3,
                }}>
                <EquationEditor
                    ref={this._ref}
                    value={StrCast(this._textBoxDoc[this._fieldKey], 'y=')}
                    onChange={str => (this._textBoxDoc[this._fieldKey] = str)}
                    autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
                    autoOperatorNames="sin cos tan"
                    spaceBehavesLikeTab={true}
                />
            </div>
        );
    }
}