import React, {lazy, Suspense, useMemo} from 'react'
import {Link} from 'react-router-dom'
import BEMModule from 'utils/bem'
import Icon from 'react-uikit/icon'
import PropTypes from 'prop-types'
import styles from './styles.scss'
const Chart = lazy(() => import('react-uikit/chart'))
import routes from 'global/constants/routes'

const bem = new BEMModule(styles)
const layout = {margin: {l: 0, r: 0, t: 8, b: 8}}
const TIMESERIES_PLACEHOLDER = {
    ts: ['2018-05-30', '2018-05-31'],
    value: ['0%', '0%'],
}

const CourseAttachedPortfolio = ({
    className,
    portfolio,
    timeseries = TIMESERIES_PLACEHOLDER,
}) => {
    const isBlank = !portfolio
    const {name = ' • • • ', id: portfolioId} = portfolio || {}
    const portfolioLink = `${routes.PORTFOLIO}/${portfolioId}${routes.PORTFOLIO_HOLDINGS}`
    const chartData = useMemo(
        () => [
            {
                x: timeseries.ts,
                y: timeseries.value,
                color: '#B3B3B3',
            },
        ],
        [timeseries]
    )

    const rootClassNames = bem.classNames(
        'c-course-attached-portfolio',
        className
    )
    const iconClassNames = bem.classNames('c-course-attached-portfolio__icon')
    const chartClassNames = bem.classNames('c-course-attached-portfolio__chart')

    return (
        <div className={rootClassNames}>
            <h3>
                <Icon name="portfolio" className={iconClassNames} />
                My portfolio
            </h3>
            <div>
                {isBlank ? (
                    <span>{name}</span>
                ) : (
                    <Link to={portfolioLink}>{name}</Link>
                )}
            </div>
            <Suspense fallback={null}>
                <Chart
                    className={chartClassNames}
                    data={chartData}
                    type="sparkline"
                    layout={layout}
                />
            </Suspense>
        </div>
    )
}

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

export default CourseAttachedPortfolio