import React, {useMemo, lazy, Suspense} from 'react'
import PropTypes from 'prop-types'
import requestStatuses from 'common-fe/constants/request-statuses'

import BarChart from '../bar-chart'
import Carousel from 'react-uikit/carousel'
const ChartBlank = lazy(() => import('react-uikit/chart/partials/chart-blank'))

import styles from './styles.scss'
import BEMModule from 'utils/bem'
import {
    makeAssetBarChartData,
    makeDiversificationBarChartData,
} from 'global/utils/metrics'
const bem = new BEMModule(styles)

const getBlankState = ({status = requestStatuses.PENDING}) => {
    const BlankState = () => {
        let message = ''

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

        return (
            <Suspense fallback={null}>
                <ChartBlank message={message} />
            </Suspense>
        )
    }

    return BlankState
}

const PortfolioDiversificationBreakdown = ({className, portfolio}) => {
    const rootClassNames = bem.classNames(
        'c-portfolio-diversification-breakdown',
        className
    )
    const carouselClassNames = bem.classNames(
        'c-portfolio-diversification-breakdown__carousel'
    )
    const footerClassNames = bem.classNames(
        'c-portfolio-diversification-breakdown__footer'
    )
    const {
        metrics: {diversification, status},
    } = portfolio
    const {
        assetClassDistributions,
        regionDistributions,
        sectorDistributions,
    } = diversification

    const isBlank = status !== requestStatuses.RESOLVED

    const assetData = useMemo(
        () => makeAssetBarChartData(assetClassDistributions),
        [assetClassDistributions]
    )
    const regionData = useMemo(
        () => makeDiversificationBarChartData(regionDistributions),
        [regionDistributions]
    )
    const industryData = useMemo(
        () => makeDiversificationBarChartData(sectorDistributions),
        [sectorDistributions]
    )
    const BlankChart = useMemo(() => getBlankState({status}), [status])

    // Cash is not considered in the chart but it provides information for diversification
    // therefore we must check to make sure the other assets are not all 0 values
    const isAssetDataBlank = !assetData.some(({y}) => y.some((value) => value))

    const items = [
        {
            label: 'Asset Class',
            value: 'ASSET_CLASS',
            className: '',
            isBlank: isBlank || assetData.length === 0 || isAssetDataBlank,
            renderBlank: BlankChart,
            data: assetData,
        },
        {
            label: 'Geography',
            value: 'GEOGRAPHY',
            className: '',
            isBlank: isBlank || regionData.length === 0,
            renderBlank: BlankChart,
            data: regionData,
        },
        {
            label: 'Industry',
            value: 'INDUSTRY',
            className: '',
            isBlank: isBlank || industryData.length === 0,
            renderBlank: BlankChart,
            data: industryData,
        },
    ]

    return (
        <aside className={rootClassNames}>
            <Carousel
                className={carouselClassNames}
                items={items}
                itemTemplate={BarChart}
            >
                <Carousel.Tabs />
                <Carousel.Items />
            </Carousel>
            <footer className={footerClassNames}>
                <p>Exposure (%)</p>
                <p>{`Net % > 0 indicates overall long`}</p>
                <p>{`Net % < 0 indicates overall short`}</p>
            </footer>
        </aside>
    )
}

PortfolioDiversificationBreakdown.propTypes = {
    className: PropTypes.string,
    portfolio: PropTypes.object,
}

export default React.memo(PortfolioDiversificationBreakdown)