import { Colors } from '../../styles';
import * as React from 'react';
import { Background, FullScreenContent, Content, StyledLoading } from './styled-loading';

interface Props {
    loading: boolean;
    fullscreen?: boolean;
    label?: React.ReactNode;
    color: Colors;
    onClose?: () => void;
}

interface SpinnerProps {
    label: React.ReactNode;
    color: Colors;
}

const Spinner = (props: SpinnerProps) => (
    <>
        <span>{props.label}</span>
        <StyledLoading
            color={props.color}
        >
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </StyledLoading>
    </>
)

const Loading = (props: Props) => {
    if (!props.loading) {
        return null;
    }

    if (props.fullscreen) {
        return (
            <Background onClick={props.onClose}>
                <FullScreenContent>
                    <Spinner
                        color={props.color}
                        label={props.label}
                    />
                </FullScreenContent>
            </Background>
        );
    }

    return(
        <Content>
            <Spinner
                color={props.color}
                label={props.label}
            />
        </Content>
    )
};

Loading.defaultProps = {
    color: 'primary',
}

export default Loading;