// rafce
import React, { useState } from 'react';
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  Container
} from 'reactstrap';

const Header = ({logo,isSignedIn,login,logout}) => {
  const [isOpen, setIsOpen] = useState(false);


  const toggle = () => setIsOpen(!isOpen);

  function onLogout(){
    localStorage.removeItem("token")
  }

  return (
    <div >
      <Navbar color="white" light expand="lg" fixed="top">
        <Container className="text-center">
        <NavbarBrand href="/"><img  src={logo} alt="logo" height="50" width="60"></img></NavbarBrand>
        <NavbarToggler onClick={toggle} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="mx-auto justify-content-center align-items-center" navbar>
            <NavItem>
              <NavLink href="/home">Home</NavLink>
            </NavItem>
            <NavItem>
            <NavLink href="/about">About</NavLink>
            </NavItem>
            { isSignedIn && 
              <>
              <NavItem>
              <NavLink href="/blogs">Blogs</NavLink>
              </NavItem>
              <NavItem>
              <NavLink href="/videos">Videos</NavLink>
              </NavItem>
              <NavItem>
              <NavLink href="/premiumservice">Premire Service</NavLink>
              </NavItem>
              <NavItem>
              <NavLink href="/cutoff">Cutoff/Rank</NavLink>
              </NavItem>
              <NavItem>
              <NavLink href="/feedback">Feedback</NavLink>
              </NavItem>
              </>
            }
            <NavItem>
            <NavLink href="/contact">Contact</NavLink>
            </NavItem>
            { !isSignedIn && 
              <div>
                <a href="/" className="pl-3 btn border-0 text-white" style={{marginLeft:"25px",paddingRight:"25px",paddingLeft:"25px"}}> {login} </a><span>      </span>
                <a href="/register" className="btn border-0 text-white " style={{paddingRight:"25px",paddingLeft:"25px"}}> {logout} </a>
              </div>
} 
{ isSignedIn && 
              <div>
                <div className="pl-3 btn border-0 text-white" style={{marginLeft:"20px",paddingRight:"20px",paddingLeft:"25px"}}> {login} </div><span>      </span>
                <a href="/" onClick={onLogout} className="btn border-0 text-white " style={{paddingRight:"20px",paddingLeft:"20px"}}> {logout} </a>
              </div>
} 
          </Nav>
        </Collapse>
        </Container>
      </Navbar>
    </div>
  );
}
Header.defaultProps = {
  login: "LogIn",
}

export default Header;


//ES7 import prop types
// import PropTypes from 'prop-types'
// const x=false;

// const Header = (props) => {
// / const Header = ({logo}) => {
//     return (
//         <header>
//             {/* inline css - camelcasetype and {{}}   (or) with variables*/}
//             {/* <h1>Todo Tracker {props.title}</h1> */}
//             {/* <h1 style={{color:'orange', backgroundColor:'black'}}> {x ? 'yes' : 'no '}Todo Tracker {title}</h1> */}
//             {/* <h1 style={headingStyle}> {x ? 'yes' : 'no '}Todo Tracker {title}</h1> */}
//             </header>
//     )
// }

// deflaut value
   

// prop types specify
    // Header.propTypes={
    //     // title:PropTypes.string
    //     title:PropTypes.string.isRequired,
    // }

// const headingStyle={
//     color:'orange',
//     backgroundColor:'yellow'
// }