import React, {lazy, Suspense, useCallback} from 'react'
import PropTypes from 'prop-types'
import requestStatuses from 'common-fe/constants/request-statuses'
import content from '../../content'

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

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

const PortfolioSharpeRatioChart = ({className, data, type}) => {
    const {timestamps, value, error, status} = data
    const isLoading = status === requestStatuses.PENDING
    const rootClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-chart',
        className
    )
    const hasData = !isLoading && timestamps.length > 1
    let chartData = data

    switch (type) {
        case 'sharpe':
            break

        default: {
            chartData = [{x: timestamps, y: value}]
        }
    }

    const BlankMessage = useCallback(() => {
        const rootClassNames = bem.classNames(
            'c-portfolio-sharpe-ratio-chart__blank-overlay'
        )
        const messageClassNames = bem.classNames(
            'c-portfolio-sharpe-ratio-chart__blank-message'
        )
        const message = isLoading
            ? 'Retrieving data...'
            : error?.errors?.[0]?.reason || content.noSharpeRatio

        return (
            <div className={rootClassNames}>
                <p className={messageClassNames}>{message}</p>
            </div>
        )
    }, [error, isLoading])

    return (
        <div className={rootClassNames}>
            <Suspense fallback={null}>
                <Chart
                    className={rootClassNames}
                    data={chartData}
                    isBlank={!hasData}
                    renderBlank={BlankMessage}
                    showLegend={false}
                    showRangeSlider={false}
                    type={type}
                    layout={{
                        margin: {
                            l: 36,
                            r: 24,
                            t: 16,
                            b: 24,
                        },
                        height: 368,
                    }}
                />
            </Suspense>
        </div>
    )
}

PortfolioSharpeRatioChart.propTypes = {
    className: PropTypes.string,
    data: PropTypes.oneOfType([
        PropTypes.arrayOf(
            PropTypes.shape({
                x: PropTypes.arrayOf(PropTypes.string),
                y: PropTypes.arrayOf(PropTypes.number),
            })
        ),
        PropTypes.object,
    ]),
    type: PropTypes.string,
}

PortfolioSharpeRatioChart.defaultProps = {
    type: 'scatter',
}

export default React.memo(PortfolioSharpeRatioChart)