/* global APP_HOSTNAME */
import React, {useMemo} from 'react'
import PropTypes from 'prop-types'
import {makeMenuItems} from './helpers'
import {isESHost} from 'common-fe/utils/browser'
import routes from 'global/constants/routes'

import Icon from 'react-uikit/icon'
import PageNav from 'components/page-nav'
import Tag from 'react-uikit/tag'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

const PortfolioPageNav = ({
    activeTab,
    isPublic,
    portfolio,
    showPortfolioDeleteConfirmation,
    showPortfolioLeaveConfirmation,
    showPortfolioSettings,
    showTeamManagement,
    tabs,
    type,
    users,
}) => {
    const {id, courseSection: course} = portfolio
    const tagClassNames = bem.classNames('c-portfolio-page-nav__tag')
    const publicClassNames = bem.classNames('c-portfolio-page-nav__public')
    const privateClassNames = bem.classNames('c-portfolio-page-nav__private')
    const privateIconClassNames = bem.classNames(
        'c-portfolio-page-nav__private-icon'
    )
    const publicIconClassNames = bem.classNames(
        'c-portfolio-page-nav__public-icon'
    )

    const menuItems = useMemo(() =>
        makeMenuItems({
            course,
            users,
            showPortfolioDeleteConfirmation,
            showPortfolioSettings,
            showPortfolioLeaveConfirmation,
            showTeamManagement,
        })
    )
    const baseUrl = isESHost()
        ? `https://${APP_HOSTNAME}`
        : window.location.host
    const portfolioLinkText = `${baseUrl}${routes.PORTFOLIO_SHOWCASE}/${id}`

    const title = (
        <React.Fragment>
            <Tag className={tagClassNames}>{type || ' • • • '}</Tag>
            <span>Portfolio</span>
            {isPublic ? (
                <a
                    className={publicClassNames}
                    href={portfolioLinkText}
                    target="_blank"
                    rel="noreferrer noopener"
                >
                    Public profile{' '}
                    <Icon className={publicIconClassNames} name="link" />
                </a>
            ) : (
                <span className={privateClassNames}>
                    <Icon className={privateIconClassNames} name="lock" />
                    Private
                </span>
            )}
        </React.Fragment>
    )

    return (
        <PageNav
            activeTab={activeTab}
            tabs={tabs}
            title={title}
            menuItems={menuItems}
        />
    )
}

PortfolioPageNav.propTypes = {
    activeTab: PropTypes.number,
    isPublic: PropTypes.bool,
    portfolio: PropTypes.object,
    portfolioUrl: PropTypes.string,
    showPortfolioDeleteConfirmation: PropTypes.func,
    showPortfolioLeaveConfirmation: PropTypes.func,
    showPortfolioSettings: PropTypes.func,
    showTeamManagement: PropTypes.func,
    tabs: PropTypes.arrayOf(
        PropTypes.shape({
            route: PropTypes.string,
            label: PropTypes.string,
        })
    ),
    type: PropTypes.string,
    users: PropTypes.arrayOf(PropTypes.string),
}

export default PortfolioPageNav