import React from "react";
import { Link } from "react-router-dom";
import { LanguageContext } from "./Language/LanguageContext";
import { SidebarElements } from "./Sidebar";

export default function NavbarComponent() {
  return (
    <LanguageContext.Consumer>
      {({ changeLanguage, language }) => (
        <>
          <ul className="nav">
            <NavElements language={language} />

            <li className="icon" onClick={() => openNavMobile()}>
              &#9776;
            </li>
          </ul>

          <div className="nav-mobile">
            <button onClick={() => closeNavMobile()}>&times;</button>

            <ul>
              <NavElements language={language} mobile={true} />

              <div>
                <SidebarElements changeLanguage={changeLanguage} />
              </div>
            </ul>
          </div>
        </>
      )}
    </LanguageContext.Consumer>
  );
}

function NavElements(props) {
  return (
    <>
      <li>
        <Link
          to="/"
          onClick={() => {
            fontWeightEffect(0);
            if (props.mobile) {
              closeNavMobile();
            }
          }}
        >
          Alexander Röse
        </Link>
      </li>
      <li>
        <Link
          to="/projects"
          onClick={() => {
            fontWeightEffect(1);
            if (props.mobile) {
              closeNavMobile();
            }
          }}
        >
          {props.language.nav.projects}
        </Link>
      </li>
      <li className="right">
        <Link
          to="/contact"
          onClick={() => {
            fontWeightEffect(2);
            if (props.mobile) {
              closeNavMobile();
            }
          }}
        >
          {props.language.nav.contact}
        </Link>
      </li>
    </>
  );
}

export function navOnresize() {
  const navMobile = document.querySelector(".nav-mobile");

  if (window.screen.width > 600 && navMobile.classList.contains("open")) {
    navMobile.classList.remove("open");

    document
      .querySelector(".nav .icon")
      .setAttribute("style", "visibility: visible;");
  }
}

function openNavMobile() {
  document
    .querySelector(".nav .icon")
    .setAttribute("style", "visibility: hidden;");

  document.querySelector(".nav-mobile").classList.add("open");
}

function closeNavMobile() {
  document
    .querySelector(".nav .icon")
    .setAttribute("style", "visibility: visible;");

  document.querySelector(".nav-mobile").classList.remove("open");
}

export function navOnload() {
  switch (window.location.pathname) {
    case "/projects":
      fontWeightEffect(1);
      break;
    case "/contact":
      fontWeightEffect(2);
      break;
    default:
      fontWeightEffect(0);
  }
}

function fontWeightEffect(number) {
  // navbar
  const navLi = document.querySelectorAll(".nav li a");

  for (let i = 0; i < navLi.length; i++) {
    if (i !== number) {
      navLi[i].setAttribute("style", "font-weight: normal;");
    }
  }

  navLi[number].setAttribute("style", "font-weight: bold;");

  // overlay
  const navMobileLi = document.querySelectorAll(".nav-mobile li a");

  for (let i = 0; i < navMobileLi.length; i++) {
    if (i !== number) {
      navMobileLi[i].setAttribute("style", "font-weight: normal;");
    }
  }

  navMobileLi[number].setAttribute("style", "font-weight: bold;");
}
