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';
import { StrCast } from '../../../fields/Types';
import { computed } from 'mobx';
import { Docs } from '../../documents/Documents';

/**
 * LoadingBox Class represents a placeholder doc for documents that are currently
 * being uploaded to the server and being fetched by the client. The LoadingBox doc is then used to
 * generate the actual type of doc that is required once the document has been successfully uploaded.
 *
 * Design considerations:
 * We are using the docToFiles map in Documents to keep track of all files being uploaded in one session of the client.
 * If the file is not found we assume an error has occurred with the file upload, e.g. it has been interrupted by a client refresh
 * or network issues. The docToFiles essentially gets reset everytime the page is refreshed.
 *
 * TODOs:
 *  1) ability to query server to retrieve files that already exist if users upload duplicate files.
 *  2) ability to restart upload if there is an error
 *  3) detect network error and notify the user
 *  4 )if file upload gets interrupted, it still gets uploaded to the server if there are no network interruptions which leads to unused space. this could be
 *      handled with (1)
 *  5) Fixing the stacking view bug
 *  6) Fixing the CSS
 *
 * @author naafiyan
 */
@observer
export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
    public static LayoutString(fieldKey: string) {
        return FieldView.LayoutString(LoadingBox, fieldKey);
    }

    /**
     * Returns true if file is uploading, false otherwise
     */
    @computed private get isLoading(): boolean {
        const file = Docs.Create.docsToFiles.get(this.rootDoc);
        return file ? true : false;
    }

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

    render() {
        return (
            <div className="loadingBoxContainer">
                {this.isLoading ? (
                    <div className="textContainer">
                        <p className="headerText">Loading:</p>
                        <span className="text">{StrCast(this.rootDoc.title)}</span>
                        <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
                    </div>
                ) : (
                    <div className="textContainer">
                        <p className="headerText">Error Loading File: </p>
                        <span className="text">{StrCast(this.rootDoc.title)}</span>
                    </div>
                )}
            </div>
        );
    }
}