import React, {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {Spinner} from './Spinner/Spinner';

type LoaderProps = {
    children?: React.ReactNode;
    size?: number;
} & Partial<LoaderDefaultProps>;

type LoaderDefaultProps = {
    size: number;
};

export class Loader extends PureComponent<LoaderProps> {
    static propTypes = {
        children: PropTypes.node,
        size: PropTypes.number
    };

    static defaultProps = {
        children: null,
        size: 32
    };

    renderContent() {
        let {children} = this.props;
        if (!children || (typeof children === 'string' && !children.trim())) {
            return null;
        }
        return <div className="loader-content">{children}</div>;
    }

    render() {
        const {size} = this.props;
        return (
            <div className="loader-overlay">
                <div className="loader-wrapper">
                    <div className="loader">
                        <Spinner size={size} />
                        {this.renderContent()}
                    </div>
                </div>
            </div>
        );
    }
}
