//Modules
import React from 'react';
import ToggleDisplay from 'react-toggle-display';

//Style
import "./Header.css";

//Components
import Logo from '../images/logo.png';
import LogoLight from '../images/logo-licht.png'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";


class Header extends React.Component {
    constructor() {
        super();
        this.state = { show: false };
      }
    
      handleClick() {
        this.setState({
          show: !this.state.show
        });
      }

    render() {
        return (
            <header id="Header">
                <div className="d-flex Header px-4 py-3">
                    <Link to="/" className="logo">
                        <img src={Logo} alt="Logo" />
                    </Link>
                    
                        <ToggleDisplay hide={this.state.show} tag="section">
                        <div className="NavBar d-flex">
                            <div className="NavItem mx-2">
                                <Link to="/" className="Nav-link">Home</Link>
                            </div>
                            <div className="NavItem mx-2">
                            <Link to="/contact" className="Nav-link">Contact</Link>
                            </div>
                            <div className="NavItem mx-2">
                                <a className="AP-Btn-Primary" onClick={ () => this.handleClick() }>Login</a>
                            </div>
                            </div>
                        </ToggleDisplay>
                        
                        <ToggleDisplay show={this.state.show}>
                        <div className="NavBar d-flex">
                            <div className="NavItem mx-2">
                                <input placeholder="Gebruikersnaam"/>
                            </div>
                            <div className="NavItem mx-2">
                            <input placeholder="Wachtwoord"/>
                            </div>
                            <div className="NavItem mx-2">
                                <a className="AP-Btn-Primary">Login</a>
                            </div>
                            <div className="NavItem mx-2">
                                <a className="AP-color-primary Cancel-btn" onClick={ () => this.handleClick() }><i class="fa fa-times" aria-hidden="true"></i></a>
                            </div>
                            </div>
                        </ToggleDisplay>
                </div>  
            </header>
        )
    }
    
}

    

export default Header;