import React from 'react'
import PropTypes from 'prop-types'

import Chart from '../chart'
import Carousel from 'react-uikit/carousel'

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

const PortfolioSharpeRatioHistorical = ({className, timeseries}) => {
    const items = [
        {
            label: 'Sharpe Ratio',
            value: 'SHARPE_RATIO',
            className: '',
            data: timeseries,
            type: 'scatter',
        },
        {
            label: 'Return & Volatility',
            value: 'RETURN_AND_VOLATILITY',
            className: '',
            data: timeseries,
            type: 'sharpe',
        },
    ]

    const rootClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-historical',
        className
    )
    const carouselClassNames = bem.classNames(
        'c-portfolio-sharpe-ratio-historical__carousel'
    )

    return (
        <aside className={rootClassNames}>
            <Carousel
                className={carouselClassNames}
                items={items}
                itemTemplate={Chart}
            >
                <Carousel.Tabs />
                <Carousel.Items />
            </Carousel>
        </aside>
    )
}

PortfolioSharpeRatioHistorical.propTypes = {
    className: PropTypes.string,
    timeseries: PropTypes.object,
}

export default React.memo(PortfolioSharpeRatioHistorical)