import React, { useState, useEffect } from "react";
// import  {doLogOut} from "../actions/logOutActions";

import { Link } from "react-router-dom";
import { connect } from "react-redux";
import history from "../utils/history";
import { logOut } from "../actions/authActions";
// const mapStateToProps = (state) => ({
//   doLogOut: !!state.auth.token,
// });

// const mapDispatchToProps = (dispatch) => ({
//   doLoginOut: (login, password) => dispatch(doLogOut()),
// });

const Header = ({ login, logOut }) => {
  console.log(login);

  function onLogOut() {
    logOut();
  }

  return (
    <div className="header">
      <ul className="mainMenu">
        <li>
          <h2>gRomkoPlayer</h2>
        </li>
        <li>
          <h2>Library</h2>
        </li>
        <li>
          <h2>Playlist</h2>
        </li>
        <li>
          <h2>Search</h2>
        </li>
        <li className="userMenu">
          <h2>User: {login}</h2>
          <ul className="userMenu-child">
            <li onClick={onLogOut}>
              {/* <li onClick={doLogOut}> */}
              {/* <Link to="/login">Log out</Link> */}
              {/* <a href="#">Log out</a> */}
              Log out
            </li>
          </ul>
        </li>
      </ul>
    </div>
  );
};

// export default Header;
export default connect(null, { logOut })(Header);
// export default connect(null, {doLogOut})(Header);
