import React from 'react';
import PropTypes from 'prop-types';
import { NavLink } from 'react-router-dom';
import { Badge, UncontrolledDropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem } from 'reactstrap';
import { AppNavbarBrand, AppSidebarToggler } from '@coreui/react';

function BackendHeader({ ...props }) {
  // eslint-disable-next-line
  const { notificationItems, navMenuItems } = props

  return (
    <React.Fragment>
      <AppSidebarToggler className="d-lg-none" display="md" mobile />
      <AppNavbarBrand
        full={props.fullAppLogo}
        minimized={props.miniAppLogo}
      />
      <AppSidebarToggler className="d-md-down-none" display="lg" />
      <Nav className="d-md-down-none" navbar>
        {
          navMenuItems && navMenuItems.length > 0 && (
            navMenuItems.map((item, index) => (
              <NavItem className="px-3" key={index}>
                <NavLink to={item.link} className="nav-link" >{item.text}</NavLink>
              </NavItem>
            ))
          )
        }     
      </Nav>
      <Nav className="ml-auto" navbar>
        <UncontrolledDropdown nav direction="down">
          <DropdownToggle nav>
            <i className="icon-bell"></i><Badge pill color="danger">{props.notificationItems.length}</Badge>
          </DropdownToggle>
          <DropdownMenu>
            <DropdownItem header tag="div" className="text-center"><strong>You have {props.notificationItems.length} notifications</strong></DropdownItem>
            {
              notificationItems && notificationItems.length > 0 ? (
                notificationItems.map((value, index) => (
                  <DropdownItem key={index}><i className="fa fa-circle-o"></i> {value.text}</DropdownItem>
                ))
              ) : (
                  <DropdownItem>{props.textNoNotification}</DropdownItem>
                )
            }
          </DropdownMenu>
        </UncontrolledDropdown>
        <UncontrolledDropdown nav direction="down">
          <DropdownToggle nav>
            <img src={props.userAvatarUri} className="img-avatar" alt="img-avatar" />
            <span className="name">{props.userName}</span>
          </DropdownToggle>
          <DropdownMenu right>
            <DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
            <DropdownItem onClick={e => props.onLogout && props.onLogout(e)}><i className="fa fa-lock"></i>{props.textLogout}</DropdownItem>
          </DropdownMenu>
        </UncontrolledDropdown>
      </Nav>
    </React.Fragment>
  )
}

BackendHeader.propTypes = {
  fullAppLogo: PropTypes.object,
  miniAppLogo: PropTypes.object,
  userName: PropTypes.string.isRequired,
  userAvatarUri: PropTypes.string,
  onLogout: PropTypes.func.isRequired,
  textLogout: PropTypes.string,
  textNoNotification: PropTypes.string,
  notificationItems: PropTypes.array,  
  navMenuItems: PropTypes.array
}
BackendHeader.defaultProps = {
  fullAppLogo: { src: require('../../assets/images/no-logo.png'), height: 25, alt: "app-logo" },
  miniAppLogo: { src: require('../../assets/images/no-logo-mini.png'), height: 30, alt: "app-logo" },
  userName: 'None',
  userAvatarUri: require('../../assets/images/blank-avatar.png'),
  textLogout: 'Logout',
  textNoNotification: 'No Notification',
  notificationItems: [],  
  navMenuItems: []
};

export default BackendHeader;
