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

export type infoState = {
    Message: string;
    Events: () => any;
    Actions: (arg?: any) => any;
};

export interface CollectionFreeFormInfoStateProps {
    state: infoState;
}

@observer
export class CollectionFreeFormInfoState extends React.Component<CollectionFreeFormInfoStateProps> {
    _disposer: IReactionDisposer | undefined;

    clearState = () => this._disposer?.();
    initState = () => (this._disposer = reaction(this.props.state.Events, this.props.state.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>;
    }
}