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 type infoState = {
    Message: string;
    Arcs: infoArc[];
};

export interface CollectionFreeFormInfoStateProps {
    state: infoState;
}

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

    clearState = () => this._disposers.map(disposer => disposer());
    initState = () => (this._disposers = this.props.state.Arcs.map(arc => reaction(arc.events, arc.actions, { fireImmediately: true })));

    componentDidMount(): void {
        this.initState();
    }
    componentWillUpdate() {
        this.clearState();
        this.initState();
    }
    componentWillUnmount(): void {
        this.clearState();
    }
    render() {
        return <div className="infoUI">{this.props.state.Message}</div>;
    }
}