import React, {lazy, Suspense, useMemo} 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 CourseAvgSharpeRatio = ({avgSharpeRatio, sharpeRatioData}) => {
    const rootClassNames = bem.classNames('c-course-avg-sharpe-ratio')
    const statisticClassNames = bem.classNames(
        'c-course-avg-sharpe-ratio__statistic'
    )
    const graphClassNames = bem.classNames('c-course-avg-sharpe-ratio__graph')
    const graphContainerClassNames = bem.classNames(
        'c-course-avg-sharpe-ratio__graph-container'
    )
    const sharpeRatioClassNames = bem.classNames(
        'c-course-avg-sharpe-ratio__sharpe-ratio'
    )
    const noDataClassNames = bem.classNames(
        'c-course-avg-sharpe-ratio__no-data'
    )

    const noData = !sharpeRatioData?.length
    const avgSharpe = Number(avgSharpeRatio)

    const x = useMemo(
        () =>
            !noData &&
            sharpeRatioData.map((value) => {
                return typeof value === 'number' ? value.toFixed(2) : 0
            }),
        [noData, sharpeRatioData]
    )

    return (
        <div className={rootClassNames}>
            <h3>Avg. Sharpe Ratio</h3>
            <div className={statisticClassNames}>
                <p className={sharpeRatioClassNames}>
                    {!isNaN(avgSharpe) ? avgSharpe.toFixed(2) : '—'}
                </p>

                <div className={graphContainerClassNames}>
                    {noData ? (
                        <p className={noDataClassNames}>
                            Average Sharpe Ratio is
                            <br />
                            not available yet.
                        </p>
                    ) : (
                        <Suspense fallback={null}>
                            <Chart
                                className={graphClassNames}
                                config={{
                                    displayModeBar: false,
                                }}
                                data={[{x}]}
                                type="histogram"
                            />
                        </Suspense>
                    )}
                </div>
            </div>
        </div>
    )
}

CourseAvgSharpeRatio.propTypes = {
    avgSharpeRatio: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    sharpeRatioData: PropTypes.arrayOf(PropTypes.number),
}

CourseAvgSharpeRatio.defaultProps = {
    avgSharpeRatio: '—',
}

export default CourseAvgSharpeRatio