import React from 'react';
import {
  Link
} from 'react-router-dom';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
} from 'reactstrap';
import {
  FaSignOutAlt,
  FaLeaf,
  FaSlidersH
} from 'react-icons/fa';

export default class Example extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false,
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand>RodiVert</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink tag={Link} to="/categories">
                  <FaLeaf />
                  {' '}
                  Catégories
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} to="/properties">
                  <FaSlidersH />
                  {' '}
                  Propriétés
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} to="/LogOut">
                  <FaSignOutAlt />
                  {' '}
                  Déconnexion
                </NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}