import { IconButton, Size, Type } from 'browndash-components';
import { IReactionDisposer, action, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
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 StateMessageGIF = Symbol('StateMessageGIF');
export const StateEntryFunc = Symbol('StateEntryFunc');
export class infoState {
    [StateMessage]: string = '';
    [key: string]: infoArc;
    [StateMessageGIF]?: string = '';
    [StateEntryFunc]?: () => any;
    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
        this[StateMessage] = message;
        Object.assign(this, arcs);
        this[StateMessageGIF] = messageGif;
        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 gif the gif displayed when in this state
 * @param entryFunc a function to call when entering the state
 * @returns an FSA state
 */
export function InfoState(
    msg: string, //
    arcs: { [key: string]: infoArc },
    gif?: string,
    entryFunc?: () => any
) {
    return new infoState(msg, arcs, gif, entryFunc);
}

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

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

    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();
    }

    toggleGIF(): void {
        let dots = document.getElementById('dots');
        var moreText = document.getElementById('gif');
        var btnText = document.getElementById('toggle-gif');

        if (dots && btnText && moreText) {
            if (dots.style.display === 'none') {
                dots.style.display = 'inline';
                moreText.style.display = 'none';
                btnText.innerHTML = 'Show more';
            } else {
                dots.style.display = 'none';
                moreText.style.display = 'inline';
                btnText.innerHTML = 'Show less';
            }
        }
    }
    render() {
        return (
            <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
                <div className="msg">{this.State?.[StateMessage]}</div>
                <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
                    <span id="dots"></span>
                    <img id="gif" className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
                    <button onClick={() => this.toggleGIF()} id="toggle-gif">
                        Show less
                    </button>
                </div>
                <div style={{ position: 'absolute', top: -10, left: -10 }}>
                    <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />
                </div>
            </div>
        );
    }
}