import * as React from 'react';
import { FunctionComponent } from 'react';
import { Context } from '../context/context';
import { LoadingState } from '../models/LoadingState';
import { getColorByBrightness } from '../util/ColorUtil';
import CircularPanel from './CircularPanel';

const LoadingComponent: FunctionComponent<{ context: Context, loadingState: LoadingState<any> }> = ({ context, loadingState }) => {
    if (loadingState.isUnset() || loadingState.isLoaded()) {
        return <></>
    }
    if (loadingState.isLoading() || loadingState.isError()) {
        const textColorOnBoard = getColorByBrightness(
            context.themeManager.theme.boardColor,
            context.themeManager.theme.textColor,
            context.themeManager.theme.textLightColor
        );
        const text = loadingState.isLoading() ? context.texts.Loading +"..." : loadingState.errorMessage;
        return (
            <CircularPanel color={context.themeManager.theme.boardColor}>
                <h4 style={{ margin: "0", color: textColorOnBoard }}>{`${text}`}</h4>
            </CircularPanel>
        );
    }
    return <></>
}

export default LoadingComponent;