import { IReactionDisposer, makeObservable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import './CollectionFreeFormView.scss';

/**
 * An Fsa Arc.  The first array element is a test condition function that will be observed.
 * The second array element is a function that will be invoked when the first test function
 * returns a truthy value
 */
export type infoArc = [() => any, (res?: any) => infoState];

export const StateMessage = Symbol('StateMessage');
export const StateEntryFunc = Symbol('StateEntryFunc');
export class infoState {
    [StateMessage]: string = '';
    [StateEntryFunc]?: () => any;
    [key: string]: infoArc;
    constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any) {
        this[StateMessage] = message;
        Object.assign(this, arcs);
        this[StateEntryFunc] = entryFunc;
    }
}

/**
 * Create an FSA state.
 * @param msg the message displayed when in this state
 * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
 * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
 * and an arc transition action function (that sets the next state)
 * @param entryFunc a function to call when entering the state
 * @returns an FSA state
 */
export function InfoState(
    msg: string, //
    arcs: { [key: string]: infoArc },
    entryFunc?: () => any
) {
    return new infoState(msg, arcs, entryFunc);
}

export interface CollectionFreeFormInfoStateProps {
    infoState: infoState;
    next: (state: infoState) => any;
}

@observer
export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
    _disposers: IReactionDisposer[] = [];

    constructor(props: any) {
        super(props);
        makeObservable(this);
    }

    get State() {
        return this._props.infoState;
    }
    get Arcs() {
        return Object.keys(this.State ?? []).map(key => this.State?.[key]);
    }

    clearState = () => this._disposers.map(disposer => disposer());
    initState = () =>
        (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
            return reaction(
                //
                arc.test,
                res => {
                    if (res) {
                        const next = arc.act(res);
                        this._props.next(next);
                    }
                },
                { fireImmediately: true }
            );
        }));

    componentDidMount(): void {
        this.initState();
    }
    componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
        super.componentDidUpdate(prevProps);
        this.clearState();
        this.initState();
    }
    componentWillUnmount(): void {
        this.clearState();
    }
    render() {
        return <div className="infoUI">{this.State?.[StateMessage]}</div>;
    }
}