import React, { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import Image from "next/image";

const Header = () => {
  // Add active class
  const [currentPath, setCurrentPath] = useState("");
  const router = useRouter();
  // console.log(router.asPath)

  useEffect(() => {
    setCurrentPath(router.asPath);
  }, [router]);

  const [menu, setMenu] = React.useState(true);

  const toggleNavbar = () => {
    setMenu(!menu);
  };

  React.useEffect(() => {
    let elementId = document.getElementById("navbar");
    document.addEventListener("scroll", () => {
      if (window.scrollY > 170) {
        elementId.classList.add("is-sticky");
      } else {
        elementId.classList.remove("is-sticky");
      }
    });
  });

  // Search Modal
  const [isActiveSearchModal, setActiveSearchModal] = useState("false");
  const handleToggleSearchModal = () => {
    setActiveSearchModal(!isActiveSearchModal);
  };

  const classOne = menu
    ? "collapse navbar-collapse"
    : "collapse navbar-collapse show";
  const classTwo = menu
    ? "navbar-toggler navbar-toggler-right collapsed"
    : "navbar-toggler navbar-toggler-right";

  return (
    <>
      <div id="navbar" className="navbar-area">
        <div className="zixon-nav">
          <div className="container-fluid">
            <nav className="navbar navbar-expand-md navbar-light">
              <Link href="/" className="navbar-brand">
                <Image
                  width={144}
                  height={33}
                  src="/images/logo.png"
                  alt="logo"
                />
              </Link>

              <button
                onClick={toggleNavbar}
                className={classTwo}
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="icon-bar top-bar"></span>
                <span className="icon-bar middle-bar"></span>
                <span className="icon-bar bottom-bar"></span>
              </button>

              <div className={classOne} id="navbarSupportedContent">
                <ul className="navbar-nav">
                  <li className="nav-item">
                    <Link
                      href="/"
                      className={`nav-link ${
                        currentPath == "/" ? "active" : ""
                      }`}
                    >
                      Home
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link
                      href="/knowledge"
                      className="dropdown-toggle nav-link"
                    >
                      Knowledge
                    </Link>
                    <ul className="dropdown-menu">
                      <li className="nav-item">
                        <Link
                          href="/corpedia"
                          className={`nav-link ${
                            currentPath == "#" ? "active" : ""
                          }`}
                        >
                          Corpedia
                        </Link>
                        <ul>
                          <li className="nav-item">
                            <Link
                              href="/taxwire"
                              className={`nav-link ${
                                currentPath == "#" ? "active" : ""
                              }`}
                            >
                              Tax Wire
                            </Link>
                          </li>
                          <li className="nav-item">
                            <Link
                              href="/budgetpanorama"
                              className={`nav-link ${
                                currentPath == "#" ? "active" : ""
                              }`}
                            >
                              Budget Panorama
                            </Link>
                          </li>
                        </ul>
                      </li>
                      <li className="nav-item">
                        <Link
                          href="/blogs"
                          className={`nav-link ${
                            currentPath == "#" ? "active" : ""
                          }`}
                        >
                          Blogs
                        </Link>
                      </li>
                    </ul>
                  </li>

                  <li className="nav-item">
                    <Link
                      href="/people"
                      className={`nav-link ${
                        currentPath == "/people/" ? "active" : ""
                      }`}
                    >
                      People
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link
                      href="/client-servicing/"
                      className={`nav-link ${
                        currentPath == "/client-servicing/" ? "active" : ""
                      }`}
                    >
                      Client Servicing
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link
                      href="#"
                      className={`nav-link ${
                        currentPath == "#" ? "active" : ""
                      }`}
                    >
                      Careers
                    </Link>
                  </li>

                  <li className="nav-item">
                    <Link
                      href="/contact"
                      className={`nav-link ${
                        currentPath == "/contact/" ? "active" : ""
                      }`}
                    >
                      Contact Us
                    </Link>
                  </li>
                </ul>
              </div>
              {/* 
              <div className="others-option">
                <div className="search-icon" onClick={handleToggleSearchModal}>
                  <i className="ri-search-line"></i>
                </div>
              </div> */}
            </nav>
          </div>
        </div>
      </div>

      {/* Search Form */}
      <div
        className={`search-overlay ${
          isActiveSearchModal ? "" : "search-overlay-active"
        }`}
      >
        <div className="d-table">
          <div className="d-table-cell">
            <div className="search-overlay-layer"></div>
            <div className="search-overlay-layer"></div>
            <div className="search-overlay-layer"></div>

            <div
              className="search-overlay-close"
              onClick={handleToggleSearchModal}
            >
              <span className="search-overlay-close-line"></span>
              <span className="search-overlay-close-line"></span>
            </div>

            <div className="search-overlay-form">
              <form>
                <input
                  type="text"
                  className="input-search"
                  placeholder="Enter your keywords..."
                />
                <button type="submit">
                  <i className="ri-search-line"></i>
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Header;