import React from 'react'
import PropTypes from 'prop-types'
import NavItemDefault from 'react-uikit/nav/item-templates/default-item'
import {Transition} from 'react-transition-group'
import PortfolioNav from 'containers/portfolio-nav'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

/* eslint-disable react/display-name */
const TabTemplate = React.forwardRef(
    ({className, isNavOpen, tab, toggleNav}, ref) => (
        <button
            className={className}
            ref={ref}
            style={{
                border: 0,
                padding: 0,
                backgroundColor: 'transparent',
                textTransform: 'uppercase',
                textAlign: 'left',
                outline: 'none',
            }}
            onClick={toggleNav}
        >
            <NavItemDefault isNavOpen={isNavOpen} tab={tab} />
        </button>
    )
)

TabTemplate.propTypes = {
    className: PropTypes.string,
    isNavOpen: PropTypes.bool,
    tab: PropTypes.object,
    toggleNav: PropTypes.func,
}

class PortfolioSelectionTabItem extends React.PureComponent {
    state = {isActive: false}
    tab = React.createRef()
    menu = React.createRef()

    componentDidUpdate(_, prevState) {
        if (!prevState.isActive && this.state.isActive) {
            window.addEventListener('click', this.handleClick, true)
            return
        }

        if (prevState.isActive && !this.state.isActive) {
            window.removeEventListener('click', this.handleClick)
        }
    }

    handleClick = (e) => {
        window._tab = this.tab
        window._menu = this.menu

        const isExternalClick =
            e.target !== this.tab.current &&
            !this.tab.current?.contains(e.target) &&
            e.target !== this.menu.current &&
            !this.menu.current?.contains(e.target)

        if (this.state.isActive && isExternalClick) {
            this.onClose()
        }
    }

    onOpen = () => this.setState({isActive: true})
    onClose = () => this.setState({isActive: false})

    render() {
        const {isActive} = this.state
        const {isNavOpen, tab} = this.props

        const classes = bem.classNames('c-portfolio-selection-tab-item')
        const menuClasses = bem.classNames(
            'c-portfolio-selection-tab-item__menu',
            {
                showing: isActive,
                hiding: !isActive,
            }
        )

        return (
            <PortfolioNav
                isOpen={isActive}
                onOpen={this.onOpen}
                onClose={this.onClose}
            >
                <PortfolioNav.Controls
                    className={classes}
                    isNavOpen={isNavOpen}
                    tab={tab}
                    innerRef={this.tab}
                    render={TabTemplate}
                />

                <Transition in={isActive} timeout={250}>
                    <PortfolioNav.Menu
                        className={menuClasses}
                        innerRef={this.menu}
                    />
                </Transition>
            </PortfolioNav>
        )
    }
}

PortfolioSelectionTabItem.propTypes = {
    className: PropTypes.string,
    isNavOpen: PropTypes.bool,
    tab: PropTypes.object,
}

export default PortfolioSelectionTabItem