import { NavLink as Link } from "react-router-dom";
import PropTypes from "prop-types";

import PrimaryButton from "./buttons/PrimaryButton";
import Burger from "./burger";
import { useAuth } from "../context/AuthContext";
import SnowOn from "../../public/NavBar/SnowOn.svg";
import SnowOff from "../../public/NavBar/SnowOff.svg";
import { useState } from "react";

export default function Navbar({ navData, toggleRain, setToggleRain }) {
  const { user, logout } = useAuth();
  const [snowImageSrc, setSnowImageSrc] = useState(SnowOff);

  function toggleRainBtn() {
    if (toggleRain === false) {
      setToggleRain(true);
      setSnowImageSrc(SnowOn);
    } else {
      setToggleRain(false);
      setSnowImageSrc(SnowOff);
    }
  }

  return (
    <nav className="header-main">
      <Link
        className="logo"
        to="/"
        aria-label="Retourner à la page d'accueil"
        title="Logo Clickerz"
      />
      <div className="navbar">
        <ul className="nav-list">
          {navData.map((navIndex) => {
            if (navIndex.dropdown === undefined) {
              return navIndex.btn === false ? (
                <li key={navIndex.id}>
                  <Link className="mainLink" to={navIndex.linkurl}>
                    {navIndex.linkname}
                  </Link>
                </li>
              ) : (
                <li key={navIndex.id}>
                  <PrimaryButton
                    btnText={navIndex.linkname}
                    btnLink={navIndex.linkurl}
                  />
                </li>
              );
            }
            return (
              <li key={navIndex.id} className="dropdown">
                <Link className="mainLink" to={navIndex.linkurl}>
                  {navIndex.linkname}
                </Link>
                <ul className="dropdown-content">
                  {navIndex.dropdown.map((dropdown) => (
                    <li key={dropdown.id}>
                      <Link
                        className="dropLink"
                        to={navIndex.linkurl + dropdown.linkurl}
                      >
                        {dropdown.linkname}
                      </Link>
                    </li>
                  ))}
                </ul>
              </li>
            );
          })}
        </ul>
        {user ? (
          <div className="auth-nav">
            <span className="auth-nickname">{user.nickname}</span>
            <Link className="mainLink" to="/settings" title="Paramètres">
              ⚙
            </Link>
          </div>
        ) : (
          <Link className="mainLink" to="/login">
            Connexion
          </Link>
        )}
        <img
          onClick={() => toggleRainBtn()}
          src={snowImageSrc}
          style={{ height: "28px", cursor: "pointer" }}
          alt="Activer/désactiver les bulles"
          title="Ambiance bulles"
        />
        <Burger navData={navData} />
      </div>
    </nav>
  );
}

Navbar.propTypes = {
  navData: PropTypes.arrayOf(
    PropTypes.shape({
      btn: PropTypes.bool,
      id: PropTypes.string,
      linkname: PropTypes.string,
      linkurl: PropTypes.string,
      dropdown: PropTypes.arrayOf(
        PropTypes.shape({
          btn: PropTypes.bool,
          id: PropTypes.string,
          linkname: PropTypes.string,
          linkurl: PropTypes.string,
        })
      ),
    })
  ),
};

Navbar.defaultProps = {
  navData: [],
};