import React from 'react';
import PropTypes from 'prop-types';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Form from 'react-bootstrap/Form';
import NavDropdown from 'react-bootstrap/NavDropdown';
import FormControl from 'react-bootstrap/es/FormControl';
import Button from 'react-bootstrap/Button';
import { NavLink } from 'react-router-dom';
import axios from 'axios';

class HeaderNavigation extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      anchorEl: null,
      mobileMoreAnchorEl: null,
      companyId: null,
      companyName: 'Choose company',
      companies: [],
      currentCompany: null,
    };
  }

  componentWillMount() {
    axios.get('http://localhost:8080/company/current')
      .then((response) => {
        this.setState({
          companyName: response.data.name,
        });
      })
      .catch(() => {
        console.log('ERROR WHILE GETTING CURRENT COMPANY');
      });

    axios.get('http://localhost:8080/company/all')
      .then((response) => {
        this.setState({
          companies: response.data,
        });
      });
  }


  handleMenuChangeCompany(companyId) {
    axios.post('http://localhost:8080/company/change/company', {
      id: companyId,
    });
    // Here it needs to tell the to reload
  }

  render() {
    const { companyName, companies } = this.state;
    return (
    // TODO: Fix font colour
      <Navbar bg="primary" expand="lg">
        <Navbar.Brand>Invoisas</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto">
            <NavLink to="/"><Button>Dashboard</Button></NavLink>
            <NavLink to="/companies/"><Button>My companies</Button></NavLink>
            <NavLink to="/invoices/"><Button>Invoices</Button></NavLink>
            <NavLink to="/contacts/"><Button>Contacts</Button></NavLink>
            <NavDropdown title={companyName} id="basic-nav-dropdown" onSelect={this.handleMenuChangeCompany}>
              {companies.length > 0 ? companies.map(company => (
                <NavDropdown.Item eventKey={company.id}>{company.name}</NavDropdown.Item>
              )) : <NavDropdown.Item>{companyName}</NavDropdown.Item> }
            </NavDropdown>
          </Nav>

          <Form inline>
            <FormControl type="text" placeholder="Search..." className="mr-sm-2" />
            <Button variant="outline-light">Search</Button>
          </Form>
          <Nav><Nav.Link>User placeholder</Nav.Link></Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default HeaderNavigation;