import React, {useEffect} from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import {renderShortNumber} from 'common-fe/utils/render'

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

import rankingPeriods from 'global/constants/ranking-periods'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const activitiesNotAllowedValue = {
    change: {
        value: 0,
        percent: 0,
        percentDisplay: '0.00',
    },
    valueDisplay: '– –',
}

const PortfolioSection = ({
    className,
    getRankings,
    metrics,
    policy,
    portfolio: {
        currency,
        description,
        fundingAmount,
        holdings,
        id: portfolioId,
        investmentApproach,
        isArchived,
        isCourseEnded,
        totalReturn,
        value,
    },
    onOpenPortfolioDescription,
    onOpenPortfolioSettings,
}) => {
    const activitiesAllowed = policy
        ? policy.portfolio && policy.portfolio.activitiesAllowed
        : true
    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 displayMetrics = [
        {
            label: 'Starting Value',
            amount: `$ ${renderShortNumber(fundingAmount, currency, {
                largeNumber: true,
                decimal: 0,
            })}`,
        },
        {
            label: 'Total Return',
            amount: `${totalReturn.change.percentDisplay}%`,
        },
        {
            label: 'Sharpe Ratio',
            amount: sharpeDisplay,
        },
    ]

    useEffect(() => {
        if (!metrics?.sharpe?.allTime?.valueDisplay) {
            getRankings({portfolioId})
        }
    }, [])

    const rootClassNames = bem.classNames('c-portfolio-section', className)
    const valueClassNames = bem.classNames('c-portfolio-section__value')
    const descriptionClassNames = bem.classNames(
        'c-portfolio-section__description'
    )

    return (
        <section className={rootClassNames}>
            <PortfolioDescription
                canEdit={true}
                className={descriptionClassNames}
                description={description}
                investmentApproach={investmentApproach}
                onOpenPortfolioDescription={onOpenPortfolioDescription}
                onOpenPortfolioSettings={onOpenPortfolioSettings}
            />
            <PortfolioValue
                className={valueClassNames}
                change={
                    activitiesAllowed && value
                        ? value.change
                        : activitiesNotAllowedValue.change
                }
                holdingsDatetime={holdingsDatetime}
                isArchived={isArchived}
                size="large"
                value={
                    (activitiesAllowed || isCourseEnded) && value
                        ? value.valueDisplay
                        : activitiesNotAllowedValue.valueDisplay
                }
            />
            <PortfolioMetrics
                metrics={displayMetrics}
                activitiesAllowed={activitiesAllowed}
            />
        </section>
    )
}

PortfolioSection.propTypes = {
    className: PropTypes.string,
    getRankings: PropTypes.func,
    metrics: PropTypes.object,
    policy: PropTypes.object,
    portfolio: PropTypes.shape({
        currency: PropTypes.string,
        description: PropTypes.string,
        fundingAmount: PropTypes.number,
        holdings: PropTypes.object,
        id: PropTypes.string,
        investmentApproach: PropTypes.string,
        isArchived: PropTypes.bool,
        isCourseEnded: PropTypes.bool,
        totalReturn: PropTypes.object,
        value: PropTypes.shape({
            change: PropTypes.shape({
                percent: PropTypes.number,
                percentDisplay: PropTypes.string,
                value: PropTypes.oneOfType([
                    PropTypes.string,
                    PropTypes.number,
                ]),
            }),
            value: PropTypes.number,
            valueDisplay: PropTypes.string,
        }),
    }),
    onOpenPortfolioDescription: PropTypes.func,
    onOpenPortfolioSettings: PropTypes.func,
}

export default PortfolioSection