import React from 'react'
import PropTypes from 'prop-types'
import {safeToFixed} from 'common-fe/utils'
import {renderPercentDisplay} from 'common-fe/utils/render'
import {getSharpeRatioGrade} from 'utils/metrics'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

// import SelectInput from 'react-uikit/select-input'
import SharpeRatioMetric from '../metric'

// const SHARPE_TIMESERIES_OPTIONS = [
//     {value: 'allTime', label: 'All Time'},
//     {value: 'week', label: 'Last Week'},
//     {value: 'month', label: 'Last Month'},
//     {value: 'threeMonths', label: 'Last 3 Months'},
//     {value: 'year', label: 'Last Year'},
// ]

const PortfolioSharpeRatioSummary = ({
    className,
    metrics,
    // getPortfolioSharpeTimeseries,
    // onTimeseriesPeriodChange,
}) => {
    // const handleTimeseriesChange = ({value}) => {
    //     const config = {alertOnError: false, overrideLoader: true}
    //     getPortfolioSharpeTimeseries({portfolioId: portfolio.id, period: value}, config)
    //         .then(() => {
    //             onTimeseriesPeriodChange(value)
    //         })
    // }
    const {
        sharpe: {
            allTime: {
                value: sharpeRatio,
                avgReturnRate,
                avgRiskFreeRate,
                stdReturnRate,
            } = {},
        } = {},
    } = metrics || {}
    const avgReturn = avgReturnRate ? avgReturnRate * 100 : 0
    const riskFreeRate = avgRiskFreeRate ? avgRiskFreeRate * 100 : 0
    const volatility = stdReturnRate ? stdReturnRate * 100 : 0
    const avgReturnDisplay = !isNaN(avgReturnRate)
        ? renderPercentDisplay(avgReturn)
        : '––'
    const riskFreeRateDisplay = !isNaN(avgRiskFreeRate)
        ? renderPercentDisplay(riskFreeRate)
        : '––'
    const sharpeRatioDisplay = safeToFixed(sharpeRatio, 2)
    const volatilityDisplay = !isNaN(stdReturnRate)
        ? renderPercentDisplay(volatility)
        : '––'

    const sharpeRatioGrade = getSharpeRatioGrade({
        sharpeRatio,
        avgReturn,
        riskFreeRate,
    })

    const rootClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-summary',
        className
    )
    const titleClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-summary__title'
    )
    const labelScoreClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-summary__metric',
        {
            sharpe: true,
            [sharpeRatioGrade.value]: sharpeRatioGrade.value,
        }
    )
    const metricClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-summary__metrics'
    )
    const labelPassiveClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-summary__metric',
        {passive: true}
    )
    const labelActiveClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-summary__metric',
        {active: true}
    )

    return (
        <aside className={rootClassNames}>
            <h2 className={titleClassNames}>Sharpe Ratio</h2>
            {/* <SelectInput
                defaultIndex={1}
                onChange={handleTimeseriesChange}
                options={SHARPE_TIMESERIES_OPTIONS}
                size="small"
            /> */}
            <ul className={metricClassNames}>
                <SharpeRatioMetric
                    className={labelScoreClassNames}
                    label={sharpeRatioGrade.label}
                    display={sharpeRatioDisplay}
                />
                <SharpeRatioMetric
                    className={labelPassiveClassNames}
                    label="Risk-Free Rate"
                    display={`${riskFreeRateDisplay}%`}
                    title={`${renderPercentDisplay(riskFreeRate, 4)}%`}
                />
                <SharpeRatioMetric
                    className={labelActiveClassNames}
                    label="Avg. Return"
                    display={`${avgReturnDisplay}%`}
                    title={`${renderPercentDisplay(avgReturn, 4)}%`}
                />
                <SharpeRatioMetric
                    className={labelActiveClassNames}
                    label="Volatility"
                    display={`${volatilityDisplay}%`}
                    title={`${renderPercentDisplay(volatility, 4)}%`}
                />
            </ul>
        </aside>
    )
}

PortfolioSharpeRatioSummary.propTypes = {
    className: PropTypes.string,
    getPortfolioSharpeTimeseries: PropTypes.func,
    metrics: PropTypes.object,
    onTimeseriesPeriodChange: PropTypes.func,
}

export default React.memo(PortfolioSharpeRatioSummary)