import React from 'react';
import PropTypes from 'prop-types';
import { CSSTransition } from 'react-transition-group';
import './styles/Preloader.scss';
import { createNamespace } from '../../tools/namingTools';

const n = createNamespace('Preloader');

const animTime = 300;

const Preloader = ({
    isLoading,
    className: extraClass
}) => {
    const componentVariables = {
        animtime: animTime && `${animTime}ms`
    };

    return (
        <CSSTransition
            in={isLoading}
            appear
            timeout={animTime}
            unmountOnExit
        >
            <div {...n('overlay').withClass(extraClass).withVariables(componentVariables).withTestId().props}>
                <div {...n('spinner').withTestId().props}>
                    <div {...n('dot').props} />
                    <div {...n('dot').props} />
                    <div {...n('dot').props} />
                    <div {...n('dot').props} />
                    <div {...n('dot').props} />
                    <div {...n('dot').props} />
                </div>
            </div>
        </CSSTransition>
    );
};

Preloader.propTypes = {
    isLoading: PropTypes.bool,
    className: PropTypes.string
};

Preloader.defaultProps = {
    isLoading: false,
    className: null
};

export default Preloader;
