import React, {lazy, Suspense} from 'react'
import PropTypes from 'prop-types'
import Avatar from 'react-uikit/avatar'
const Chart = lazy(() => import('react-uikit/chart'))
import {Grid} from 'react-uikit/layout'
import {DEFAULT_USER} from 'global/constants/data-models'
import PortfolioType from '../portfolio-type'
import BEMModule from 'utils/bem'
import {getPortfolioTypeDisplay} from 'utils/portfolio'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const HeaderTemplate = ({portfolio, timeseries}) => {
    const {name: portfolioName, users = []} = portfolio
    const {marketValue} = timeseries || {}
    const isSingleOwner = users.length === 1
    const [user = DEFAULT_USER] = users
    const {avatarUrl, firstName, lastName} = user
    const avatarProps = isSingleOwner
        ? {
              avatarUrl,
              firstName,
              lastName,
          }
        : {
              index: users.length,
          }
    const classes = bem.classNames('c-portfolio-showcase__header')
    const avatarClasses = bem.classNames('c-portfolio-showcase__header__avatar')
    const portfolioTypeClasses = bem.classNames(
        'c-portfolio-showcase__header__portfolio-type'
    )

    const idContainerClasses = bem.classNames(
        'c-portfolio-showcase__header__identifier-container'
    )
    const nameContainerClasses = bem.classNames(
        'c-portfolio-showcase__header__name-container'
    )
    const portfolioNameClasses = bem.classNames(
        'c-portfolio-showcase__header__portfolio-name'
    )
    const userNameClasses = bem.classNames(
        'c-portfolio-showcase__header__user-name'
    )
    const chartClasses = bem.classNames('c-portfolio-showcase__header__chart')

    const historicals = [
        {
            x: marketValue?.ts || [],
            y: marketValue?.value || [],
            color: '#FFFFFF',
        },
    ]

    const portfolioType = getPortfolioTypeDisplay({portfolio, user})

    return (
        <section className={classes}>
            <PortfolioType
                className={portfolioTypeClasses}
                type={portfolioType}
            />

            <Grid
                align="center"
                className={idContainerClasses}
                gap={16}
                direction="column"
                justify="start"
            >
                <Avatar className={avatarClasses} {...avatarProps} />

                <div>
                    <h1 className={portfolioNameClasses}>{portfolioName}</h1>

                    <Grid className={nameContainerClasses}>
                        {users.map(({id, firstName, lastName}) => (
                            <span
                                key={id}
                                className={userNameClasses}
                            >{`${firstName} ${lastName}`}</span>
                        ))}
                    </Grid>
                </div>
            </Grid>
            <Suspense fallback={null}>
                <Chart
                    className={chartClasses}
                    data={historicals}
                    type="sparkline"
                />
            </Suspense>
        </section>
    )
}

HeaderTemplate.propTypes = {
    portfolio: PropTypes.shape({
        name: PropTypes.string,
        portfolioType: PropTypes.string,
        users: PropTypes.arrayOf(
            PropTypes.shape({
                avatarUrl: PropTypes.string,
                firstName: PropTypes.string,
                lastName: PropTypes.string,
            })
        ),
    }),
    timeseries: PropTypes.object,
}

export default React.memo(HeaderTemplate)