// ** React Imports
import { Fragment, useState } from 'react'
// ** Dropdowns Imports
// ** Dropdowns Imports
import IntlDropdown from './IntlDropdown'
import NavbarSearch from './NavbarSearch'
import NotificationDropdown from './NotificationDropdown'
import * as Icon  from 'react-feather'
// ** Custom Components
import NavbarBookmarks from './NavbarBookmarks'
import UserDropdown from './UserDropdown'


// import NavIcons from './NavIcons'
// ** Third Party Components

import { NavItem, NavLink, Tooltip } from 'reactstrap'

const ThemeNavbar = props => {
  // ** Props
  const { skin, setSkin, setMenuVisibility } = props

  return (
    <Fragment>
      <div className='bookmark-wrapper d-flex align-items-center'>
        <ul className='navbar-nav d-xl-none'>
          <NavItem className='mobile-menu mr-auto'>
            <NavLink className='nav-menu-main menu-toggle hidden-xs is-active' onClick={() => setMenuVisibility(true)}>
              <Icon.Menu className='ficon' />
            </NavLink>
          </NavItem>
        </ul>
        <NavbarBookmarks setMenuVisibility={setMenuVisibility} skin={skin} setSkin={setSkin} />
      </div>

      <ul className='nav navbar-nav align-items-center ml-auto'>
        <UserDropdown />
      </ul>
    </Fragment>
  )
}

export default ThemeNavbar
