import { observer } from 'mobx-react';
import { ViewBoxAnnotatableComponent } from '../DocComponent';
import { FieldView, FieldViewProps } from './FieldView';
import * as React from 'react';
import './LoadingBox.scss';
import ReactLoading from 'react-loading';

export interface LoadingBoxProps {
    title: string;
    text: string;
}

@observer
export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(LoadingBox, fieldKey);
    }

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

    render() {
        return (
            <div className="loadingBoxContainer">
                <span>Loading: {this.dataDoc.text}</span>
                <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
            </div>
        );
    }
}