import React from 'react'
import { Redirect } from 'react-router';
import '../../css/Components/navbar.css';


class Navbar extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            mouseOn:false
        }
    }

    handleDisplay = () =>{
        this.setState({mouseOn:true})
    }

    handleNormal = () => {
        this.setState({mouseOn:false})
    }

    navToTicket = () => {
        this.setState({redirect:true})
    }

    render(){
        if (this.state.redirect){
          return (<Redirect to={this.props.redirect}/>)
        }
        return (
            <div id="navbar">
                <div id="createedit" onClick={this.handleDisplay} onMouseLeave={this.handleNormal}>
                  {this.props.leftLeft ?
                  <>
                  {!this.state.mouseOn && <p>{this.props.left}</p>}
                  {this.state.mouseOn && <div id="choice"><p onClick={this.props.handleNewArticle}>{this.props.leftLeft}</p><p>{this.props.leftMiddle}</p><p onClick={this.props.handleNewCategory}>{this.props.leftRight}</p></div>}
                  </>
                  : <p>{this.props.left}</p>
                  }
                </div>
                <div id="blank">
                  OK
                </div>
                <div id="update" onClick={this.navToTicket}>
                  <p>{this.props.right}</p>
                </div>
              </div>
        )
    }
}

export default Navbar