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

const bem = new BEMModule(styles)

const PortfolioDetails = ({portfolio, timeseries}) => {
    const {id: portfolioId, isPublic, name} = portfolio

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

        return [
            {
                x: timeseries?.ts,
                y: timeseries?.value,
            },
        ]
    }, [portfolioId])

    const rootClassNames = bem.classNames('c-certificate__portfolio-details')
    const showcaseClassNames = bem.classNames(
        'c-certificate__portfolio-details__showcase'
    )
    const iconClassNames = bem.classNames(
        'c-certificate__portfolio-details__icon'
    )
    const chartClassNames = bem.classNames(
        'c-certificate__portfolio-details__chart'
    )

    return (
        <div className={rootClassNames}>
            <a
                href={`${routes.APP}/${routes.PORTFOLIO_SHOWCASE}/${portfolioId}`}
                rel="noopener noreferrer"
                target="_blank"
                title={`EquitySim | ${name}`}
                className={showcaseClassNames}
                disabled={!isPublic}
            >
                <Icon className={iconClassNames} name="tab-portfolio" />
                See portfolio details
            </a>

            <Suspense fallback={null}>
                <Chart
                    className={chartClassNames}
                    data={chartData}
                    type="sparkline"
                    isBlank={!chartData.length}
                />
            </Suspense>
        </div>
    )
}

PortfolioDetails.propTypes = {
    portfolio: PropTypes.object,
    timeseries: PropTypes.object,
}

export default PortfolioDetails