import { Component } from 'react'
import { array, bool, object, oneOfType, string, func } from 'prop-types'
import classnames from 'classnames'

import { generateMenu } from '../utils/generateMenu'

class Navigation extends Component {
  state = {
    activeItem: ''
  }

  setActiveItem = activeItem => {
    if (activeItem !== this.state.activeItem) {
      this.setState({ activeItem })
    }
  }

  render() {
    const { className, linkType, children, collapsed, ...props } = this.props
    const { activeItem } = this.state

    return children({
      collapsed,
      generateMenu,
      getListProps: () => ({
        className: classnames('nav-items', className),
        ...props
      }),
      linkType,
      setActiveItem: this.setActiveItem,
      activeItem
    })
  }
}

Navigation.propTypes = {
  /** Pass in React Router Link component to use within Navigation */
  linkType: oneOfType([func, object]),
  /** Extra css classes for Navigation */
  className: oneOfType([string, object, array]),
  /** Determine if menu is open or collapsed */
  collapsed: bool
}

Navigation.defaultProps = {
  linkType: null,
  className: '',
  collapsed: false
}

Navigation.displayName = 'Navigation'

export default Navigation