import React, { Component } from 'react'
import { node, string, bool } from 'prop-types'
import classnames from 'classnames'

import { Reference, Manager, Frame } from '@swrve/offscreen'
import { Icon } from '@swrve/icons'

import NavItem from '../navItem/NavItem'
import NavOptions from './NavOptions'

class NavTooltip extends Component {
  childrenRef = null
  state = {
    open: false,
    active: false
  }

  // Toggle Menu with :hover event (only when menu is collapsed)
  getListItemProps = openOnHover => ({
    onMouseEnter: () => openOnHover && this.setState({ open: true }),
    onMouseLeave: () => openOnHover && this.setState({ open: false })
  })

  render() {
    const { children, label, collapsed, automation, external, ...props } = this.props
    const { active, open } = this.state

    const buttonStyles = classnames({ active }, { open })
    const isMenuFloating = collapsed && open

    return (
      <li className="my-3" {...this.getListItemProps(collapsed)} data-automation={automation}>
        <Manager>
          <div>
            <Reference>
              {({ ref }) => (
                <NavItem className={buttonStyles} innerRef={ref} label={label} {...props}>
                  {external && <Icon className="external-link" name="exit" size="small" />}
                </NavItem>
              )}
            </Reference>
            {isMenuFloating ? (
              <Frame arrow placement="right-end" offsetX="mx-6">
                <NavOptions label={label} open={open} collapsed={isMenuFloating} />
              </Frame>
            ) : null}
          </div>
        </Manager>
      </li>
    )
  }
}

NavTooltip.propTypes = {
  /** List of subItems for Navigation group */
  children: node,
  /** Determine wether the menu is collapsed or not */
  collapsed: bool,
  /** Name for the Navigation group */
  label: string,
  /** Label for data-automation tag */
  automation: string
}

NavTooltip.defaultProps = {
  collapsed: false,
  automation: '',
  external: false
}

NavTooltip.displayName = 'NavTooltip'

export default NavTooltip