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

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

    @computed
    private get isLoading() {
        const file = Docs.Create.filesToDocs.get(this.rootDoc);
        return file ? true : false;
    }

    componentDidMount() {
        console.log(this.rootDoc);
        // 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">
                {this.isLoading ? (
                    <div>
                        <p className="text">Loading:</p>
                        <br></br>
                        <span className="text">{StrCast(this.rootDoc.title)}</span>
                        <ReactLoading type={'spinningBubbles'} color={'blue'} height={100} width={100} />
                    </div>
                ) : (
                    <div>
                        <span>Error Loading File: {StrCast(this.rootDoc.title)}</span>
                    </div>
                )}
            </div>
        );
    }
}