import { IReactionDisposer } from 'mobx';
import { observer } from 'mobx-react';
import { TextSelection } from 'prosemirror-state';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { Doc } from '../../../../fields/Doc';
import { StrCast } from '../../../../fields/Types';
import './DashFieldView.scss';
import EquationEditor from './EquationEditor';
import { FormattedTextBox } from './FormattedTextBox';
import { DocData } from '../../../../fields/DocSymbols';

export class EquationView {
    dom: HTMLDivElement; // container for label and value
    root: any;
    tbox: FormattedTextBox;
    view: any;
    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
        this.tbox = tbox;
        this.view = view;
        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();
        };

        this.root = ReactDOM.createRoot(this.dom);
        this.root.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />);
    }
    _editor: EquationEditor | undefined;
    setEditor = (editor?: EquationEditor) => (this._editor = editor);
    destroy() {
        this.root.unmount();
    }
    setSelection() {
        this._editor?.mathField.focus();
    }
    selectNode() {
        this.tbox._applyingChange = this.tbox.fieldKey; // setting focus will make prosemirror lose focus, which will cause it to change its selection to a text selection, which causes this view to get rebuilt but it's no longer node selected, so the equationview won't have focus
        setTimeout(() => {
            this._editor?.mathField.focus();
            setTimeout(() => (this.tbox._applyingChange = ''));
        });
    }
    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: any) {
        super(props);
        this._fieldKey = props.fieldKey;
        this._textBoxDoc = props.tbox.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();
                }}
                style={{
                    position: 'relative',
                    display: 'inline-block',
                    width: this.props.width,
                    height: this.props.height,
                    background: 'white',
                    borderRadius: '10%',
                }}>
                <EquationEditor
                    ref={this._ref}
                    value={StrCast(this._textBoxDoc[DocData][this._fieldKey])}
                    onChange={(str: any) => (this._textBoxDoc[DocData][this._fieldKey] = str)}
                    autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
                    autoOperatorNames="sin cos tan"
                    spaceBehavesLikeTab={true}
                />
            </div>
        );
    }
}