import React, {useCallback, useEffect} from 'react'
import useKeyPress from 'hook-book/use-keypress'
import PropTypes from 'prop-types'
import modalTypes from 'containers/modal-manager/modal-types'
import {TRADE_CURRENCIES} from 'global/constants/tabs'
import {history} from 'router/history'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

import {Nav} from '@equitysim/react-uikit'
import Footer from './partials/footer'
import PortfolioTabItem from 'containers/portfolio-tab-item'
import PortfolioSelectionTabItem from 'containers/portfolio-selection-tab-item'

const bem = new BEMModule(styles)

const AppNav = ({
    activeItem,
    className,
    footerTabs,
    isOpen,
    isSubscriptionActive,
    showModal,
    tabs: menuTabs,
    toggleNav,
}) => {
    const tabs = menuTabs.map(({label, ...rest}) => {
        let template = null
        if (label === 'Portfolios') {
            template = PortfolioSelectionTabItem
        } else if (label === 'Portfolio') {
            template = PortfolioTabItem
        }
        return {label, template, ...rest}
    })
    const {'\\': forwardSlash, Control} = useKeyPress()

    useEffect(() => {
        if (forwardSlash && Control) {
            toggleNav?.()
            return
        }
    }, [forwardSlash, Control])

    const onItemClick = useCallback(
        (tab) => {
            if (window.innerWidth < 420 && !tab.tabs) {
                toggleNav?.()
            }

            if (tab === TRADE_CURRENCIES) {
                showModal?.({type: modalTypes.MODAL_CURRENCY_EXCHANGE})
                return
            }

            tab.href && history.push(tab.href)
        },
        [showModal]
    )

    const renderFooter = useCallback(() => {
        return <Footer isSubscriptionActive={isSubscriptionActive} />
    }, [isSubscriptionActive])

    const classes = bem.classNames('c-nav', className)

    return (
        <Nav
            activeItem={activeItem}
            className={classes}
            isOpen={isOpen}
            footerTabs={footerTabs}
            headerText="Finance Sim"
            renderFooter={renderFooter}
            tabs={tabs}
            onItemClick={onItemClick}
            onToggle={toggleNav}
        />
    )
}

AppNav.propTypes = {
    activeItem: PropTypes.object,
    className: PropTypes.string,
    footerTabs: PropTypes.array,
    isOpen: PropTypes.bool,
    isSubscriptionActive: PropTypes.bool,
    showModal: PropTypes.func,
    tabs: PropTypes.array,
    toggleNav: PropTypes.func,
}

AppNav.defaultProps = {
    footerTabs: [],
    isOpen: true,
    tabs: [],
}

export default AppNav