import React from 'react'
import PropTypes from 'prop-types'
import userRoles from 'common-fe/constants/user-roles'
import {history} from 'router/history'
import routes from 'global/constants/routes'
import BannerManager from 'containers/banner-manager'
import GlobalSearch from 'containers/global-search'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

import {Header} from '@equitysim/react-uikit'

const bem = new BEMModule(styles)

const AppHeader = ({className, logout, title, user}) => {
    const isProfessor = user.roles.includes(userRoles.PROFESSOR)

    const menuItems = [
        {
            value: 'support',
            label: 'Support',
            onClick: () => {
                // We open the support page in a new window/tab in case a user
                // is filling out a form, we don't want to make them lose their
                // progress.
                window.open(routes.SUPPORT, '_blank')
            },
        },
        {
            value: 'settings',
            label: 'Settings',
            onClick: () => {
                history.push(routes.SETTINGS)
            },
        },
        {
            value: 'logout',
            label: 'Logout',
            onClick: logout,
        },
    ]

    const avatarClasses = bem.classNames('c-header__avatar')
    const titleClasses = bem.classNames('c-header__title')
    const searchClasses = bem.classNames('c-header__search')
    const onItemClick = (item) => item.onClick && item.onClick()

    return (
        <Header
            avatarUrl={user.avatarUrl}
            className={className}
            firstName={user.firstName}
            lastName={user.lastName}
            title={title}
        >
            <Header.Title className={titleClasses} />

            {!isProfessor && (
                <Header.Item className={searchClasses} render={GlobalSearch} />
            )}

            <Header.Avatar className={avatarClasses} alignRight />
            <Header.DropMenu
                justifyMenu="right"
                menuItems={menuItems}
                onItemClick={onItemClick}
            />
            <BannerManager />
        </Header>
    )
}

AppHeader.propTypes = {
    className: PropTypes.string,
    logout: PropTypes.func,
    title: PropTypes.string,
    user: PropTypes.shape({
        avatarUrl: PropTypes.string,
        firstName: PropTypes.string,
        lastName: PropTypes.string,
        roles: PropTypes.array,
    }),
}

export default React.memo(AppHeader)