import React, { FC, useState } from 'react'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Button, Collapse, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'
import { FeatherIcon } from '../../../components/FeatherIcons'
import { IMenuItem, IReduxState } from '../../../interfaces'

interface INavMenu {
  toggleSidebar: () => void
}

const NavMenu : FC<INavMenu> = (props: INavMenu) => {
  let { siteName, topMenu = [] } = useSelector((state: IReduxState) => state.settings)

  const { toggleSidebar } = props

  const [state, hookState] = useState({
    isOpen: false
  })

  const toggle = () => {
    hookState({
      isOpen: !state.isOpen
    })
  }

  return <header>
    <Navbar className="navbar-expand-sm navbar-toggleable-sm fixed-top border-bottom box-shadow mb-3 bg-light">
      <Button color="light" onClick={toggleSidebar}>
        <FeatherIcon icon="align-left" />
      </Button>
      <NavbarBrand href="/">{siteName}</ NavbarBrand>
      <NavbarToggler onClick={toggle} className="mr-2"/>
      <Collapse className="d-sm-inline-flex flex-sm-row-reverse" isOpen={state.isOpen} navbar>
        <ul className="navbar-nav flex-grow">
          {topMenu.map((item: IMenuItem, index: number) => {
            return <NavItem key={index}>
              <NavLink tag={Link} className="text-dark" to={item.target}>
                {item.icon ? <FeatherIcon icon={item.icon}/> : ''}
                {item.title}
              </NavLink>
            </NavItem>
          })}
        </ul>
      </Collapse>
    </Navbar>
  </header>
}

export {
  NavMenu
}