import { action, configure, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DocServer } from '../client/DocServer';
import { resolvedPorts } from '../client/util/CurrentUserUtils';
import { CompileScript } from '../client/util/Scripting';
import { EditableView } from '../client/views/EditableView';
import CursorField from '../fields/CursorField';
import { DateField } from '../fields/DateField';
import { Doc, Field, FieldResult } from '../fields/Doc';
import { Id } from '../fields/FieldSymbols';
import { List } from '../fields/List';
import { RichTextField } from '../fields/RichTextField';
import { ScriptField } from '../fields/ScriptField';
import { URLField } from '../fields/URLField';

DateField;
URLField;
ScriptField;
CursorField;

function applyToDoc(doc: { [index: string]: FieldResult }, key: string, scriptString: string): boolean;
function applyToDoc(doc: { [index: number]: FieldResult }, key: number, scriptString: string): boolean;
function applyToDoc(doc: any, key: string | number, scriptString: string): boolean {
    const script = CompileScript(scriptString, { addReturn: true, params: { this: doc instanceof Doc ? Doc.name : List.name } });
    if (!script.compiled) {
        return false;
    }
    const res = script.run({ this: doc });
    if (!res.success) return false;
    if (!Field.IsField(res.result, true)) return false;
    doc[key] = res.result;
    return true;
}

configure({
    enforceActions: 'observed',
});

@observer
class ListViewer extends React.Component<{ field: List<Field> }> {
    @observable
    expanded = false;

    @action
    onClick = (e: React.MouseEvent) => {
        this.expanded = !this.expanded;
        e.stopPropagation();
    };

    render() {
        let content;
        if (this.expanded) {
            content = (
                <div>
                    {this.props.field.map((field, index) => (
                        <DebugViewer field={field} key={index} setValue={value => applyToDoc(this.props.field, index, value)} />
                    ))}
                </div>
            );
        } else {
            content = <>[...]</>;
        }
        return (
            <div>
                <button onClick={this.onClick}>Toggle</button>
                {content}
            </div>
        );
    }
}

@observer
class DocumentViewer extends React.Component<{ field: Doc }> {
    @observable
    expanded = false;

    @action
    onClick = (e: React.MouseEvent) => {
        this.expanded = !this.expanded;
        e.stopPropagation();
    };

    render() {
        let content;
        if (this.expanded) {
            const keys = Object.keys(this.props.field);
            const fields = keys.map(key => {
                return (
                    <div key={key}>
                        <b>({key}): </b>
                        <DebugViewer field={this.props.field[key]} setValue={value => applyToDoc(this.props.field, key, value)}></DebugViewer>
                    </div>
                );
            });
            content = (
                <div>
                    Document ({this.props.field[Id]})<div style={{ paddingLeft: '25px' }}>{fields}</div>
                </div>
            );
        } else {
            content = <>[...] ({this.props.field[Id]})</>;
        }
        return (
            <div>
                <button onClick={this.onClick}>Toggle</button>
                {content}
            </div>
        );
    }
}

@observer
class DebugViewer extends React.Component<{ field: FieldResult; setValue(value: string): boolean }> {
    render() {
        let content;
        const field = this.props.field;
        if (field instanceof List) {
            content = <ListViewer field={field} />;
        } else if (field instanceof Doc) {
            content = <DocumentViewer field={field} />;
        } else if (typeof field === 'string') {
            content = <p>"{field}"</p>;
        } else if (typeof field === 'number' || typeof field === 'boolean') {
            content = <p>{field}</p>;
        } else if (field instanceof RichTextField) {
            content = <p>RTF: {field.Data}</p>;
        } else if (field instanceof URLField) {
            content = <p>{field.url.href}</p>;
        } else if (field instanceof Promise) {
            return <p>Field loading</p>;
        } else {
            return <p>Unrecognized field type</p>;
        }

        return <EditableView GetValue={() => Field.toScriptString(field)} SetValue={this.props.setValue} contents={content} />;
    }
}

@observer
class Viewer extends React.Component {
    @observable
    private idToAdd: string = '';

    @observable
    private fields: Field[] = [];

    @action
    inputOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.idToAdd = e.target.value;
    };

    @action
    onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
        if (e.key === 'Enter') {
            DocServer.GetRefField(this.idToAdd).then(
                action((field: any) => {
                    if (field !== undefined) {
                        this.fields.push(field);
                    }
                })
            );
            this.idToAdd = '';
        }
    };

    render() {
        return (
            <>
                <input value={this.idToAdd} onChange={this.inputOnChange} onKeyDown={this.onKeyPress} />
                <div>
                    {this.fields.map((field, index) => (
                        <DebugViewer field={field} key={index} setValue={() => false}></DebugViewer>
                    ))}
                </div>
            </>
        );
    }
}

(async function () {
    await DocServer.init(window.location.protocol, window.location.hostname, resolvedPorts.socket, 'viewer');
    ReactDOM.render(
        <div style={{ position: 'absolute', width: '100%', height: '100%' }}>
            <Viewer />
        </div>,
        document.getElementById('root')
    );
})();