import React from 'react'
import PropTypes from 'prop-types'
import PortfolioThumbnail from 'react-uikit/portfolio-thumbnail'
import investmentApproaches from 'common-fe/constants/investment-approaches'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const PortfolioNavItem = ({
    disabled,
    isSelected,
    portfolio,
    setPortoflio,
    timeseries,
}) => {
    const handleClick = (params) => {
        if (!disabled) {
            setPortoflio?.(params)
        }
    }
    const classes = bem.classNames('c-portfolio-nav-menu__item', {
        selected: isSelected,
        disabled,
    })
    const chartData = timeseries
        ? [{x: timeseries.ts, y: timeseries.value}]
        : []

    return (
        <PortfolioThumbnail
            className={classes}
            chartData={chartData}
            description={portfolio.description || undefined}
            id={portfolio.id}
            index={portfolio.index}
            name={portfolio.name}
            investmentApproach={
                investmentApproaches[portfolio.investmentApproach]
                    ? investmentApproaches[portfolio.investmentApproach].label
                    : undefined
            }
            onClick={handleClick}
            percentChange={portfolio.value.change.percent}
        />
    )
}

const portfolioValuePropTypes = PropTypes.shape({
    change: PropTypes.shape({
        percent: PropTypes.number,
    }).isRequired,
}).isRequired

PortfolioNavItem.propTypes = {
    portfolio: PropTypes.shape({
        id: PropTypes.string.isRequired,
        index: PropTypes.number.isRequired,
        description: PropTypes.string,
        name: PropTypes.string,
        investmentApproach: PropTypes.string,
        value: portfolioValuePropTypes,
    }).isRequired,
    disabled: PropTypes.bool,
    isSelected: PropTypes.bool,
    setPortoflio: PropTypes.func,
    timeseries: PropTypes.object,
}

export default PortfolioNavItem