import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {renderShortNumber} from 'common-fe/utils/render'
import rankingPeriods from 'global/constants/ranking-periods'
import BEMModule from 'utils/bem'

import PortfolioDescription from 'components/portfolio-description'
import PortfolioMetrics from 'components/portfolio-metrics'
import PortfolioValue from 'components/portfolio-value'

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

const OverviewTemplate = ({
    metrics,
    portfolio: {
        currency,
        description,
        fundingAmount,
        holdings,
        investmentApproach,
        isArchived,
        totalReturn,
        value: {change, valueDisplay},
    },
    showDescription,
}) => {
    const holdingsDatetime = moment(holdings?.asOfDatetime).format(
        'MMM. D, YYYY'
    )
    const {value: sharpeValue} =
        metrics?.sharpe?.[rankingPeriods.ALL_TIME] || {}
    const sharpeDisplay =
        typeof sharpeValue !== 'number' ? '--' : sharpeValue.toFixed(2)
    const portfolioMetrics = [
        {
            label: 'Starting Value',
            amount: `$ ${renderShortNumber(fundingAmount, currency, {
                largeNumber: true,
                decimal: 0,
            })}`,
        },
        {
            label: 'Total Return',
            amount: `${totalReturn.change.percentDisplay}%`,
        },
        {
            label: 'Sharpe Ratio',
            amount: sharpeDisplay,
        },
    ]

    const classes = bem.classNames('c-portfolio-showcase__overview')
    const descriptionClasses = bem.classNames(
        'c-portfolio-showcase__overview__description'
    )
    const marketValueClasses = bem.classNames(
        'c-portfolio-showcase__overview__market-value'
    )
    const changeClasses = bem.classNames(
        'c-portfolio-showcase__overview__market-value__change'
    )
    const valueClasses = bem.classNames(
        'c-portfolio-showcase__overview__market-value__value'
    )
    const metricsClasses = bem.classNames(
        'c-portfolio-showcase__overview__metrics'
    )

    return (
        <section className={classes}>
            <PortfolioDescription
                canEdit={false}
                className={descriptionClasses}
                description={description}
                investmentApproach={investmentApproach}
                onOpenPortfolioDescription={showDescription}
            />

            <PortfolioValue
                change={change}
                className={marketValueClasses}
                changeClassName={changeClasses}
                holdingsDatetime={holdingsDatetime}
                isArchived={isArchived}
                isDark={false}
                value={valueDisplay}
                valueClassName={valueClasses}
            />

            <PortfolioMetrics
                className={metricsClasses}
                metrics={portfolioMetrics}
            />
        </section>
    )
}

OverviewTemplate.propTypes = {
    metrics: PropTypes.object,
    portfolio: PropTypes.shape({
        currency: PropTypes.string,
        description: PropTypes.string,
        fundingAmount: PropTypes.number,
        holdings: PropTypes.object,
        investmentApproach: PropTypes.string,
        isArchived: PropTypes.bool,
        ranking: PropTypes.shape({
            metrics: PropTypes.object,
        }),
        totalReturn: PropTypes.object,
        value: PropTypes.object,
    }),
    showDescription: PropTypes.func,
}

export default React.memo(OverviewTemplate)