import React, {lazy, Suspense, useCallback, useEffect, useMemo} from 'react'
import PropTypes from 'prop-types'
import styles from './styles.scss'
import BEMModule from 'utils/bem'
import {hasEngagementRequirements} from 'utils/course'

import Button from 'react-uikit/button'
const Chart = lazy(() => import('react-uikit/chart'))
import Icon from 'react-uikit/icon'

const bem = new BEMModule(styles)

const BodyTemplate = ({
    course,
    data,
    getPortfolio,
    getPortfolioEngagement, // For engagement breakdown modal
    getPortfolioTimeseries,
    getUser,
    historicals = {},
    metrics,
    policy,
    portfolio,
    user,
    onShowPortfolio,
    onShowScoreBreakdown,
}) => {
    const {
        portfolio: {name: portfolioName},
        portfolioId,
        engagement,
        diversification,
        sharpe,
        return: roi,
    } = data || {}

    useEffect(() => {
        const settings = {overrideLoader: true}

        getPortfolioTimeseries?.({portfolioId})

        if (policy.isOwner) {
            getPortfolio?.(
                {portfolioId},
                settings
            ).then(({userIds: [firstId]}) =>
                getUser({userId: firstId}, settings)
            )
            getPortfolioEngagement?.({portfolioId})
        }
    }, [])

    const chartData = useMemo(() => {
        if (!historicals || historicals.ts.length <= 1) {
            return []
        }

        return [
            {
                x: historicals.ts,
                y: historicals.value,
                color: '#B3B3B3',
            },
        ]
    }, [historicals])

    const engagementScoreDisplay = useMemo(() => {
        if (!hasEngagementRequirements(course)) {
            return null
        }

        return engagement?.scoreDisplay
    }, [engagement, course])

    const showBreakdown = useCallback(() => {
        onShowScoreBreakdown?.({engagement, portfolio, metrics, user})
    }, [portfolio, metrics, user])

    const showPortfolio = useCallback(() => onShowPortfolio?.(portfolioId), [
        portfolioId,
    ])

    const classes = bem.classNames('c-class-participants-body-template')
    const portfolioClasses = bem.classNames(
        'c-class-participants-body-template__portfolio'
    )
    const showcaseClasses = bem.classNames(
        'c-class-participants-body-template__portfolio__showcase'
    )
    const iconClasses = bem.classNames(
        'c-class-participants-body-template__portfolio__showcase__icon'
    )
    const chartClasses = bem.classNames(
        'c-class-participants-body-template__portfolio__chart'
    )
    const scoresClasses = bem.classNames(
        'c-class-participants-body-template__scores'
    )
    const scoreLabelClasses = bem.classNames(
        'c-class-participants-body-template__scores__label'
    )
    const scoreValueClasses = bem.classNames(
        'c-class-participants-body-template__scores__value'
    )
    const classScoreLabelClasses = bem.classNames(
        'c-class-participants-body-template__scores__class-score',
        scoreLabelClasses,
        {disabled: !policy.isOwner}
    )
    const classScoreValueClasses = bem.classNames(
        'c-class-participants-body-template__scores__class-score',
        scoreValueClasses,
        {disabled: !policy.isOwner}
    )

    return (
        <div className={classes}>
            <div className={portfolioClasses}>
                <Button className={showcaseClasses} onClick={showPortfolio}>
                    <Icon className={iconClasses} name="tab-portfolio" />
                    {portfolioName}
                </Button>
                <Suspense fallback={null}>
                    <Chart
                        className={chartClasses}
                        data={chartData}
                        type="sparkline"
                        isBlank={!chartData.length}
                    />
                </Suspense>
            </div>

            <dl className={scoresClasses}>
                {engagementScoreDisplay && (
                    <React.Fragment>
                        <dt className={classScoreLabelClasses}>
                            <Button
                                className={classScoreLabelClasses}
                                disabled={!policy.isOwner}
                                onClick={showBreakdown}
                            >
                                {policy.isOwner
                                    ? 'See Engagement breakdown'
                                    : 'Engagement'}
                            </Button>
                        </dt>
                        <dd className={classScoreValueClasses}>
                            {engagementScoreDisplay}
                        </dd>
                    </React.Fragment>
                )}

                <dt className={scoreLabelClasses}>Diversification</dt>
                <dd className={scoreValueClasses}>
                    {diversification?.scoreDisplay}
                </dd>

                <dt className={scoreLabelClasses}>Sharpe Ratio</dt>
                <dd className={scoreValueClasses}>{sharpe?.scoreDisplay}</dd>

                <dt className={scoreLabelClasses}>Return</dt>
                <dd className={scoreValueClasses}>{roi?.scoreDisplay}</dd>
            </dl>
        </div>
    )
}

BodyTemplate.propTypes = {
    course: PropTypes.object,
    data: PropTypes.shape({
        metrics: PropTypes.object,
        portfolio: PropTypes.shape({
            id: PropTypes.string,
            isPublic: PropTypes.bool,
            name: PropTypes.string,
        }),
    }),
    getPortfolio: PropTypes.func,
    getPortfolioEngagement: PropTypes.func,
    getPortfolioTimeseries: PropTypes.func,
    getUser: PropTypes.func,
    historicals: PropTypes.shape({
        ts: PropTypes.array,
        value: PropTypes.array,
    }),
    metrics: PropTypes.object,
    policy: PropTypes.object,
    portfolio: PropTypes.object,
    user: PropTypes.object,
    onShowPortfolio: PropTypes.func,
    onShowScoreBreakdown: PropTypes.func,
}

BodyTemplate.defaultProps = {
    /* eslint-disable max-len*/
    historicals: {
        asOfDatetime: [
            '2018-05-30',
            '2018-05-31',
            '2018-06-01',
            '2018-06-02',
            '2018-06-03',
            '2018-06-04',
            '2018-06-05',
            '2018-06-06',
            '2018-06-07',
            '2018-06-08',
            '2018-06-09',
            '2018-06-10',
            '2018-06-11',
            '2018-06-12',
            '2018-06-13',
            '2018-06-14',
            '2018-06-15',
            '2018-06-16',
            '2018-06-17',
            '2018-06-18',
            '2018-06-22',
            '2018-06-22',
        ],
        value: [
            '-0.00%',
            '-0.00%',
            '0.03%',
            '0.00%',
            '0.00%',
            '0.02%',
            '0.02%',
            '-0.00%',
            '0.03%',
            '-0.12%',
            '-0.03%',
            '-0.00%',
            '0.60%',
            '0.12%',
            '-0.11%',
            '0.38%',
            '-0.13%',
            '0.08%',
            '0.03%',
            '0.38%',
            '-0.88%',
            '-0.06%',
        ],
    },
}

export default BodyTemplate