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
}) => (
    <CSSTransition
        in={isLoading}
        appear
        timeout={animTime}
        unmountOnExit
    >
        <div {...n('overlay').withVariables({ animtime: `${animTime}ms` }).props}>
            <div {...n('spinner').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
};

Preloader.defaultProps = {
    isLoading: false
};

export default Preloader;
