import PropTypes from 'prop-types';
import React from 'react';
import * as Spinner from 'better-react-spinkit';
import './index.css';

export const Loader = ({
    col,
    color,
    columnWidth,
    columns,
    cubeSize,
    dotSize,
    duration,
    endOpacity,
    gutter,
    gutterWidth,
    innerColor,
    innerSize,
    name,
    row,
    scaleEnd,
    scaleStart,
    scaleYEnd,
    scaleYStart,
    size,
    startOpacity,
    style,
    timingFunction,
}) => {
    const Component = Spinner[name];
    return (
        <div className={`loader-component ${style}`}>
            <Component
                col={col}
                color={color}
                columnWidth={columnWidth}
                columns={columns}
                cubeSize={cubeSize}
                dotSize={dotSize}
                duration={duration}
                endOpacity={endOpacity}
                gutter={gutter}
                gutterWidth={gutterWidth}
                innerColor={innerColor}
                innerSize={innerSize}
                name={name}
                row={row}
                scaleEnd={scaleEnd}
                scaleStart={scaleStart}
                scaleYEnd={scaleYEnd}
                scaleYStart={scaleYStart}
                size={size}
                startOpacity={startOpacity}
                style={style}
                timingFunction={timingFunction}
            />
        </div>
    );
};

Loader.propTypes = {
    col: PropTypes.number,
    color: PropTypes.string,
    columnWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    columns: PropTypes.number,
    cubeSize: PropTypes.number,
    dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    duration: PropTypes.number,
    endOpacity: PropTypes.number,
    gutter: PropTypes.number,
    gutterWidth: PropTypes.number,
    innerColor: PropTypes.string,
    innerSize: PropTypes.number,
    name: PropTypes.oneOf([
        'ChasingDots',
        'Circle',
        'CubeGrid',
        'DoubleBounce',
        'FadingCircle',
        'FoldingCube',
        'Pulse',
        'RotatingPlane',
        'ThreeBounce',
        'WanderingCubes',
        'Wave',
        'Wordpress',
    ]),
    row: PropTypes.number,
    scaleEnd: PropTypes.number,
    scaleStart: PropTypes.number,
    scaleYEnd: PropTypes.number,
    scaleYStart: PropTypes.number,
    size: PropTypes.number,
    startOpacity: PropTypes.number,
    style: PropTypes.string,
    timingFunction: PropTypes.func,
};

Loader.defaultProps = {
    color: '#204475',
    name: 'ThreeBounce',
    style: 'default',
};

export default Loader;