import React, {lazy, Suspense} from 'react'
import PropTypes from 'prop-types'

const Chart = lazy(() => import('react-uikit/chart'))

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const PortfolioDiversificationBarChart = ({
    className,
    data,
    isBlank,
    renderBlank,
}) => {
    const rootClassNames = bem.classNames(
        'c-portfolio-diversification-bar-chart',
        className
    )

    return (
        <div className={rootClassNames}>
            <Suspense fallback={null}>
                <Chart
                    className={rootClassNames}
                    data={data}
                    isBlank={isBlank}
                    isStacked
                    renderBlank={renderBlank}
                    type="bar"
                />
            </Suspense>
        </div>
    )
}

PortfolioDiversificationBarChart.propTypes = {
    className: PropTypes.string,
    data: PropTypes.arrayOf(
        PropTypes.shape({
            x: PropTypes.arrayOf(PropTypes.string),
            y: PropTypes.arrayOf(PropTypes.number),
        })
    ),
    isBlank: PropTypes.bool,
    renderBlank: PropTypes.func,
}

export default React.memo(PortfolioDiversificationBarChart)