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

import { Icon } from '@swrve/icons'

/**
 * <a> Link component for Navigation
 * Supports basic href and react router links
 */
class NavItem extends Component {
  render() {
    const {
      linkType,
      children,
      className,
      icon,
      theme,
      innerRef,
      label,
      buttonStyle,
      ...props
    } = this.props
    const linkClass = classnames(
      buttonStyle,
      'flex relative justify-start items-center no-underline cursor-pointer rounded-lg',
      className
    )

    const routerLink = props.to
    let routerProps = {}
    if (routerLink) {
      routerProps.activeClassName = 'active'
      if (innerRef) routerProps.innerRef = innerRef
    } else {
      routerProps.ref = innerRef
    }

    const Link = routerLink ? linkType : 'a'

    return (
      <Link className={linkClass} {...props} {...routerProps}>
        {icon && <Icon className={`text-${theme}`} name={icon} />}
        <span>{label}</span>
        {children}
      </Link>
    )
  }
}

NavItem.propTypes = {
  /** Extra classnames */
  className: oneOfType([string, object, array]),
  /** Provide an external prop for the Link i.e. from React Router */
  linkType: oneOfType([func, object]),
  /** Link path for React Router */
  to: string,
  /** Link path for href links */
  href: string,
  /** Select between primary and secondary Nav Item Styles */
  buttonStyle: string,
  /** Text label to display in the link */
  label: string,
  /** Element to display inside the link */
  children: node,
  /** Icon name to use */
  icon: string,
  /** Icon Theme */
  theme: string
}

NavItem.defaultProps = {
  buttonStyle: 'sw-primary-nav',
  theme: 'primary-100'
}

NavItem.displayName = 'NavItem'

export default NavItem