import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

import {Avatar, Layout, Tooltip} from '@equitysim/react-uikit'

const bem = new BEMModule(styles)

const PortfolioTabItem = ({
    className,
    isActive,
    isNavOpen,
    portfolio,
    tab: {label, value},
}) => {
    const classes = bem.classNames('c-portfolio-tab-item', className, {
        active: isActive,
    })

    const avatarClasses = bem.classNames('c-portfolio-tab-item__avatar')
    const textClasses = bem.classNames('c-portfolio-tab-item__text')
    const tabLabelClasses = bem.classNames('c-portfolio-tab-item__tab-label')
    const portfolioNameClasses = bem.classNames(
        'c-portfolio-tab-item__portfolio-name'
    )

    const barClasses = bem.classNames('c-portfolio-tab-item__bar')
    const menuClasses = bem.classNames('c-portfolio-tab-item__menu')
    const tooltipClasses = bem.classNames('c-portfolio-tab-item__tooltip')

    return (
        <div className={classes}>
            <div className={barClasses} data-tip="" data-for={value}>
                <Avatar
                    avatarUrl={portfolio.avatarUrl}
                    className={avatarClasses}
                    index={portfolio.index}
                    size="small"
                />
            </div>

            <div className={menuClasses}>
                <Layout.Flex
                    className={textClasses}
                    align="start"
                    direction="column"
                    justify="center"
                >
                    <span className={tabLabelClasses}>Current portfolio</span>
                    <span className={portfolioNameClasses}>
                        {portfolio.name}
                    </span>
                </Layout.Flex>

                {!isNavOpen && (
                    <Tooltip
                        id={value}
                        className={tooltipClasses}
                        direction="right"
                        isAnchored
                        isDark
                    >
                        {label}
                    </Tooltip>
                )}
            </div>
        </div>
    )
}
PortfolioTabItem.defaultProps = {
    portfolio: {
        avatarUrl: '',
        name: '',
    },
}

PortfolioTabItem.propTypes = {
    className: PropTypes.string,
    isActive: PropTypes.bool,
    isNavOpen: PropTypes.bool,
    portfolio: PropTypes.shape({
        avatarUrl: PropTypes.string,
        name: PropTypes.string,
        index: PropTypes.number,
    }),
    tab: PropTypes.shape({
        label: PropTypes.string,
        value: PropTypes.string,
    }),
}

export default React.memo(PortfolioTabItem)