import { IReactionDisposer, reaction } from 'mobx';
import { observer } from 'mobx-react';
import './CollectionFreeFormView.scss';
import React = require('react');

export type infoArc = {
    events: () => any;
    actions: (arg?: any) => any;
};
export class infoState {
    Message: string = '';
    Arcs: infoArc[] = [];
    constructor(message: string, arcs: infoArc[]) {
        this.Message = message;
        this.Arcs = arcs;
    }
}

export interface CollectionFreeFormInfoStateProps {
    state: infoState;
}

@observer
export class CollectionFreeFormInfoState extends React.Component<CollectionFreeFormInfoStateProps> {
    _disposers: IReactionDisposer[] = [];
    componentDidMount(): void {
        this._disposers = this.props.state.Arcs.map(arc =>
            reaction(
                () => arc.events(),
                args => arc.actions(args),
                { fireImmediately: true }
            )
        );
    }
    componentWillUpdate() {
        this._disposers.map(disposer => disposer());
        this._disposers = this.props.state.Arcs.map(arc =>
            reaction(
                () => arc.events(),
                args => arc.actions(args),
                { fireImmediately: true }
            )
        );
    }
    componentWillUnmount(): void {
        this._disposers.map(disposer => disposer());
    }
    render() {
        return <div className="infoUI">{this.props.state.Message}</div>;
    }
}