import React, { useState, useEffect } from "react";

import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { logOut } from "../actions/authActions";
import { useHistory } from "react-router-dom";

import "../styles/library.css";

const Header = ({ logOut }) => {
  let history = useHistory();
  const [isClicked, setIsClicked] = useState(false);

  useEffect(() => {
    let pathname = window.location.pathname.toLowerCase();
    pathname = pathname.replace("/", "");
    let li = document.querySelector(`[data-action=${pathname}]`);
    if (pathname === li.dataset.action) {
      li.classList.add("selected");
    } else {
      li.classList.remove("selected");
    }
  }, []);

  function onLogOut() {
    logOut();
    history.push("/");
  }

  // function selected(elem) {
  //   console.log("f1 click");
  //   elem.className = "selected";
  // }

  // function goToLib(elem){
  //   document.addEventListener('click', function(elem) {
  //     elem.target.parentElement.className="selected";
  //   });
  //   history.push("/private");
  // }

  function highlight(text) {
    if (text == "Library") {
      history.push("/private");
    } else if (text == "All Playlists") {
      history.push("/all_playlists");
    } else if (text == "My Playlists") {
      history.push("/my_playlists");
    } else if (text == "Search") {
      history.push("/search");
    }
  }

  return (
    <div className="header">
      <ul
        className="mainMenu"
        onClick={(e) => {
          let li;

          li = e.target.closest("li");

          highlight(li.innerText);
        }}
      >
        {/* {
          let sel = document.querySelector(".mainMenu")
        } */}
        <li className="selected">
          <h2>gRomkoPlayer</h2>
        </li>
        <li
          data-action="private"
          // className="selected"
          // onClick={(e) => {
          // goToLib(e);
          // e.target.parentElement.addEventListener('click', function(e){
          //   e.target.parentElement.className="selected";
          // setIsClicked(!isClicked);
          // });
          // history.push("/private");
          // }}
          // className={isClicked ? "selected" : null}
        >
          <h2>Library</h2>
        </li>
        <li
          data-action="all_playlists"
          // onClick={() => history.push("/all_playlists")}
        >
          <h2>All Playlists</h2>
        </li>
        <li
          data-action="my_playlists"
          // onClick={() => history.push("/my_playlists")}
        >
          <h2>My Playlists</h2>
        </li>
        <li
          data-action="search"
          // onClick={() => {
          //   history.push("/search");
          //   // setIsClicked(!isClicked);
          // }}
          // addEventListener("click", !isClicked)
          // className={isClicked ? "selected" : null}
        >
          <h2>Search</h2>
        </li>
        <li className="userMenu" onClick={() => onLogOut()}>
          <h2>User: {localStorage.user}</h2>
          <ul className="userMenu-child">
            <li
            // onClick={() => onLogOut()}
            >
              Log out
            </li>
          </ul>
        </li>
      </ul>
    </div>
  );
};

const mapStateToProps = (state) => ({
  state: state,
});
export default connect(mapStateToProps, { logOut })(Header);
