import React, { useState, useEffect } from "react";
import { Nav, Navbar, Container, Row } from "react-bootstrap";
import "./Header.css";
import blacklogo from "./Img/naplozz.png";
import whitelogo from "./Img/whitelogo.png";
import { Image } from "react-bootstrap";
import { Col } from "react-bootstrap";
import Ibutton from "../Button/Button";

import { Cross as Hamburger } from "hamburger-react";
import MediaQuery from "react-responsive";
import ChangeLangBtn from "../ChangeLangBtn/ChangeLangBtn";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
function Header() {
  const location = useLocation();
  console.log(location);
  const { t } = useTranslation();
  let menu = [
    {
      title: <>{t("header.home")}</>,
      id: "/#home",
    },
    {
      title: <>{t("header.partners")}</>,
      id: "/#partners",
    },
    {
      title: <>{t("header.features")}</>,
      id: "/#features",
    },
    {
      title: <>{t("header.pricing")}</>,
      id: "/#pricing",
    },
    {
      title: <>{t("header.blog")}</>,
      id: "/#blog",
    },
    {
      title: <>NAP Token</>,
      href: "/naptoken",
    },
  ];
  const [headerColor, setHeaderColor] = useState(false);

  const changebackground = () => {
    window.scrollY > 0 ? setHeaderColor(true) : setHeaderColor(false);
  };

  useEffect(() => {
    window.addEventListener("scroll", changebackground);
  });
  // const [setTabId] = useState(true);
  // const [active, setActive] = usestate(true);
  // const handliclick = () => {
  //   setActive = false;
  // };

  return (
    <>
      <Navbar
        expand="lg"
        sticky="top"
        fixed="top"
        className={
          headerColor && location.pathname === "/naptoken"
            ? "changeheaderBlue shadow"
            : headerColor
            ? "changeheader shadow"
            : headerColor === false && location.pathname === "/naptoken"
            ? "defaultheaderblue "
            : "defaultheader"
        }
      >
        <Container>
          <Row className="align-items-center">
            <Col lg={2} md={3} sm={6} xs={6} id="zLogo">
              <Navbar.Brand href="#">
                <Image
                  src={
                    location.pathname === "/naptoken" ? whitelogo : blacklogo
                  }
                  className="logo"
                ></Image>
              </Navbar.Brand>
            </Col>
            <Col lg={8} md={8} sm={6} xs={6}>
              <Navbar.Toggle aria-controls="navbarScroll">
                <Hamburger />
              </Navbar.Toggle>

              <Navbar.Collapse id="navbarScroll">
                <Nav className="ml-auto my-lg-0  ">
                  {menu.map((value) => {
                    return (
                      <Nav.Link
                        href={value.href}
                        onClick={() => {
                          window.location.replace(value.id);
                        }}
                        className="pl-6 ml-5"
                        style={{
                          fontFamily: "Light",
                        }}
                      >
                        <p
                          className="underline"
                          style={{ padding: "0px", margin: "0px" }}
                        >
                          {value.title}
                        </p>
                      </Nav.Link>
                    );
                  })}
                  <Nav.Link>
                    <ChangeLangBtn className="langStyle" title="Hu / En" />
                  </Nav.Link>
                </Nav>
              </Navbar.Collapse>
            </Col>
            <Col lg={2} md={2}>
              <div className="text-center d-flex">
                {/* <MediaQuery maxWidth={992}>
                  <ChangeLangBtn className="langStyle" title="En / hu" />
                </MediaQuery> */}
                <MediaQuery minWidth={992}>
                  <Ibutton
                    backgroundColor="#FD885A"
                    borderRadius="7px"
                    href="/commingsoon"
                    title={t("header.login")}
                    className="Loginbtn "
                  />
                </MediaQuery>
              </div>
            </Col>
          </Row>
        </Container>
      </Navbar>
    </>
  );
}
export default Header;
