import React from 'react'
import PropTypes from 'prop-types'
import {Transition} from 'react-transition-group'
import Button from 'react-uikit/button'
import styles from './styles.scss'
import BEMModule from 'utils/bem'

const bem = new BEMModule(styles)

const AppBannerBase = ({
    children,
    className,
    innerClassName,
    isShowing,
    onDismiss,
}) => {
    const classes = bem.classNames('c-app-banner', className, {
        showing: isShowing,
        hiding: !isShowing,
    })
    const innerClasses = bem.classNames('c-app-banner__inner', innerClassName)
    const closeButtonClasses = bem.classNames('c-app-banner__close')

    return (
        <Transition in={isShowing} timeout={500} unmountOnExit>
            <div className={classes}>
                <div className={innerClasses}>{children}</div>

                <Button.Close
                    className={closeButtonClasses}
                    onClick={onDismiss}
                />
            </div>
        </Transition>
    )
}

AppBannerBase.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    innerClassName: PropTypes.string,
    isShowing: PropTypes.bool,
    onDismiss: PropTypes.func,
}

export default AppBannerBase