import React, {lazy, Suspense, useCallback, useMemo} from 'react'
import PropTypes from 'prop-types'
import {uuid} from 'common-fe/utils'
import requestSatuses from 'common-fe/constants/request-statuses'
import content from './content'

const Chart = lazy(() => import('react-uikit/chart'))
const ChartBlank = lazy(() => import('react-uikit/chart/partials/chart-blank'))
import Tooltip from 'react-uikit/tooltip'
import {makeDiversificationRadarChartData} from 'utils/metrics'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const CHART_LAYOUT = {
    margin: {
        l: 96,
        r: 96,
        t: 0,
        b: 48,
    },
    showlegend: false,
}

const PortfolioDiversificationRadar = ({className, portfolio}) => {
    const {
        holdings: {cash},
        metrics: {diversification, status = requestSatuses.PENDING},
        value: {value: currentValue, valueDisplay},
    } = portfolio
    const {totalScore: resultScore} = diversification
    const currentScore = resultScore * 100

    const tooltipId = `portfolio-total-invested__${uuid()}`
    const rootClassNames = bem.classNames(
        'c-portfolio-diversification-radar',
        className
    )

    const remainingCashValue = cash.reduce((sum, {value}) => sum + value, 0)
    const totalInvested = (1 - remainingCashValue / currentValue) * 100
    const currentInvested = !isNaN(totalInvested)
        ? `${totalInvested.toFixed(2)}%`
        : '––%'

    const diversificationSummary = useMemo(
        () => makeDiversificationRadarChartData(diversification),
        [diversification]
    )
    const totalScore = 100

    // As long as we have one graph with complete data, we can plot it.
    const hasData = useMemo(
        () =>
            status === requestSatuses.RESOLVED &&
            diversificationSummary.some(({r}) => r.length > 0),
        [diversificationSummary]
    )

    const currentScoreDisplay =
        typeof currentScore === 'number' && !isNaN(currentScore)
            ? currentScore.toFixed(1)
            : '––'

    const score = ['low', 'medium', 'high'][
        Math.ceil((currentScore / totalScore) * 3 - 1) // Mapping score to color
    ]

    const headerClassNames = bem.classNames(
        'c-portfolio-diversification-radar__header'
    )
    const titleClassNames = bem.classNames(
        'c-portfolio-diversification-radar__title'
    )
    const subtitleClassNames = bem.classNames(
        'c-portfolio-diversification-radar__subtitle'
    )
    const scoreClassNames = bem.classNames(
        'c-portfolio-diversification-radar__score',
        {large: true}
    )
    const totalInvestedClassNames = bem.classNames(
        'c-portfolio-diversification-radar__score',
        {small: true}
    )
    const currentClassNames = bem.classNames(
        'c-portfolio-diversification-radar__current',
        {
            high: score === 'high',
            medium: score === 'medium',
            low: score === 'low',
        }
    )
    const totalClassNames = bem.classNames(
        'c-portfolio-diversification-radar__total'
    )
    const graphClassNames = bem.classNames(
        'c-portfolio-diversification-radar__graph'
    )
    const footerClassNames = bem.classNames(
        'c-portfolio-diversification-radar__footer'
    )

    const BlankState = useCallback(() => {
        let message = ''

        switch (status) {
            case requestSatuses.REJECTED: {
                message = 'There seems to be a problem, please try again later.'
                break
            }
            case requestSatuses.PENDING: {
                message = 'Retrieving data...'
                break
            }
            default: {
                message = 'There is no graph data to display.'
            }
        }

        return (
            <Suspense fallback={null}>
                <ChartBlank message={message} />
            </Suspense>
        )
    }, [status])

    return (
        <main className={rootClassNames}>
            <section className={headerClassNames}>
                <h2 className={titleClassNames}>Diversification</h2>
                <p className={scoreClassNames}>
                    <em className={currentClassNames}>{currentScoreDisplay}</em>
                    <em className={totalClassNames}>
                        &thinsp;/&thinsp;{totalScore}
                    </em>
                </p>
                <div data-tip="" data-for={tooltipId}>
                    <h3 className={subtitleClassNames}>Total invested</h3>
                    <Tooltip id={tooltipId} direction="bottom">
                        <p>{content.portfolioDiversification}</p>
                    </Tooltip>
                </div>
                <p className={totalInvestedClassNames}>
                    <em className={currentClassNames}>{currentInvested}</em>
                    <em className={totalClassNames}> of {valueDisplay}</em>
                </p>
            </section>

            <section className={graphClassNames}>
                <Suspense fallback={null}>
                    <Chart
                        data={diversificationSummary}
                        isBlank={!hasData}
                        renderBlank={BlankState}
                        type="radar"
                        layout={CHART_LAYOUT}
                    />
                </Suspense>
            </section>

            <footer className={footerClassNames}>
                <p>Diversification Score Weights</p>
                <p>Asset Class 10%</p>
                <p>Geography 10%</p>
                <p>Industry 10%</p>
            </footer>
        </main>
    )
}

PortfolioDiversificationRadar.propTypes = {
    className: PropTypes.string,
    portfolio: PropTypes.shape({
        metrics: PropTypes.object,
        holdings: PropTypes.object,
        value: PropTypes.object,
    }),
}

export default React.memo(PortfolioDiversificationRadar)