import React from "react";

import { useTranslation } from "react-i18next";

import LanguageSwitch from "../language-switch/language-switch.component";

import Logo from "../../assets/images/main/header/logo.svg";
import Logo2 from "../../assets/images/main/footer/logo.svg";
import Phone from "../../assets/images/main/footer/phone.png";
import Email from "../../assets/images/main/footer/email.png";

import "./header.style.scss";

const MidHeader = () => {
  const { t, i18n } = useTranslation();

  const toggleMenu = () => {
    const MenuButton = document.getElementsByClassName("mobile-menu-btn")[0];
    const Menu = document.getElementsByClassName("mobile-menu")[0];

    MenuButton.classList.toggle("open");
    Menu.classList.toggle("open");

    if (Menu.classList.contains("open")) {
      const outsideClickListener = (event) => {
        let MenuVisible = getComputedStyle(Menu).right;

        if (
          !Menu.contains(event.target) &&
          MenuVisible !== 0 &&
          !MenuButton.contains(event.target)
        ) {
          Menu.classList.remove("open");
          MenuButton.classList.remove("open");
          removeClickListener();
        }
        if (!Menu.classList.contains("open")) {
          removeClickListener();
        }
      };
      const removeClickListener = () => {
        document.removeEventListener("click", outsideClickListener);
      };
      document.addEventListener("click", outsideClickListener);
    }
  };

  window.addEventListener("resize", () => {
    document
      .getElementsByClassName("mobile-menu-btn")[0]
      .classList.remove("open");
    document.getElementsByClassName("mobile-menu")[0].classList.remove("open");
  });

  return (
    <header>
      <div className="logo">
        <img src={Logo} alt="MID" />
      </div>
      <nav className="navigation">
        <a href="#services">{t("menu.services")}</a>
        <a href="#about-us">{t("menu.about_us")}</a>
        <a href="#projects">{t("menu.portfolio")}</a>
        <a href="#pricing">{t("menu.pricing")}</a>
        <a href="#contact-us">{t("menu.contact_us")}</a>
        <LanguageSwitch />
      </nav>

      <div
        className="mobile-menu-btn"
        onClick={toggleMenu}
        onKeyDown={toggleMenu}
        aria-label="menu button"
        role="button"
        tabIndex={0}
      >
        <span id="top-left"></span>
        <span id="top-right"></span>
        <span id="center-left"></span>
        <span id="center-right"></span>
        <span id="bottom-left"></span>
        <span id="bottom-right"></span>
      </div>
      <div className="mobile-menu">
        <img src={Logo2} alt="MID Creative Digital Agency" />

        <nav className="navigation">
          <a href="#top">Home</a>
          <a href="#services">Services</a>
          <a href="#about-us">About Us</a>
          <a href="#projects">Featured Projects</a>
          <a href="#contact-us">Contact Us</a>
        </nav>

        <div className="header-contacts">
          <a href="tel:+371 2662 0770">
            <img src={Phone} alt="phone" />
          </a>
          <a href="tel:+371 2662 0770">+371 2662 0770</a>
        </div>
        <div className="header-contacts">
          <a href="mailto:info@midcreative.eu">
            <img src={Email} alt="email" />
          </a>
          <a href="mailto:info@midcreative.eu">info@midcreative.eu</a>
        </div>
      </div>
    </header>
  );
};

export default MidHeader;