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 { Docs, DocUtils } from '../../documents/Documents';

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

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

    componentDidMount() {
        // const file = Docs.Create.filesToDocs.get(this.rootDoc);
        // if (file) {
        //     console.log('Got to file');
        //     Docs.Create.filesToDocs.delete(this.rootDoc);
        //     // now that there is a doc do whatever slowload was going to do with that file
        //     if (typeof file === 'string') {
        //         // uploadYoutubeVideo and similar should return a placeholder, one for each placeholder
        //         // (await DocUtils.uploadYoutubeVideo(files, options)));
        //     } else {
        //         // uploadFilesToDocs and similar should return a placeholder, one for each placeholder
        //         DocUtils.uploadFileToDoc(file, {}, this.rootDoc);
        //     }
        // } else {
        //     // check if file now exists on server or not
        //     // if it does we need to retreieve it and create the appropriate doc (rest of what uploadFileToDoc was doing minus uploading)
        //     // if it doesn't display an error message "upload failed"
        // }
        // query endpoints to:
        // check if file now exists on server or not
        // if it does we need to retreieve it and create the appropriate doc (rest of what uploadFileToDoc was doing minus uploading)
        // if it doesn't display an error message "upload failed"
    }

    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>
        );
    }
}
