Header.js

"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import AccountMenu from "./MenuProfile";
import SearchComponent from "./SearchComponent";
import NeedLoginModal from "./needLoginModal";
import { isLoggedIn, useLoginBarrier } from "@/app/handlers/loginHandler";
import { usePathname } from "next/navigation";
import { useRouter } from "next/navigation";
import { ImArrowLeft } from "react-icons/im";
import Notifications from "./Notifications";

function hexToRgb(hex) {
  // Remove the hash if it exists
  hex = hex.replace(/^#/, '');

  // Parse the RGB values
  let bigint = parseInt(hex, 16);
  let r = (bigint >> 16) & 255;
  let g = (bigint >> 8) & 255;
  let b = bigint & 255;

  return [r, g, b];
}

function rgbDistance(color1, color2) {
  let r1 = color1[0], g1 = color1[1], b1 = color1[2];
  let r2 = color2[0], g2 = color2[1], b2 = color2[2];

  return Math.sqrt(
    Math.pow(r2 - r1, 2) +
    Math.pow(g2 - g1, 2) +
    Math.pow(b2 - b1, 2)
  );
}

function DefaultContent({
  handleToggleMobileSearch,
  setNeedLoginOpen,
  setFilterState,
  filterState
}) {
  const pathname = usePathname();
  const router = useRouter();
  const loginBarrier = useLoginBarrier();
  const [loggedIn, setLoggedIn] = useState(false);

  useEffect(() => {
    setLoggedIn(isLoggedIn());
  }, [])

  const handleOpenSubmit = () => {
    if (!isLoggedIn()) {
      setNeedLoginOpen(true);
    } else {
      const params = new URLSearchParams();
      params.set("redirect", pathname);
      router.push(`/publicar`);
    }
  };

  return (
    <>
      <div className="grid xl:grid-cols-[150px_auto_500px] md:grid-cols-[150px_auto_300px] grid-cols-[150px_auto] w-full">
        <div className="flex justify-center items-center px-[50px]">
          <Link href="/" className="flex justify-center items-center">
            <div
              className="w-[59px] h-[50px] bg-no-repeat bg-center bg-contain bg-logo-square"
              aria-label="logo"
            ></div>
          </Link>
        </div>
        <div className="grow hidden md:flex items-center ">
          <SearchComponent setFilterState={setFilterState} filterState={filterState} />
        </div>
        <div className="flex justify-start shrink-0 grow-0 items-center px-[25px]">
          <div className="flex items-center gap-6">
            <button
              type="button"
              alt="Abrir busca"
              title="Abrir busca"
              className="md:hidden bg-secondary hover:bg-text-color w-10 h-10 rounded text-white shrink-0 transition"
              onClick={handleToggleMobileSearch}
            >
              <SearchIcon className="h-full text-3xl" />
            </button>

            <button
              type="button"
              className="group bg-grey-button max-sm:hidden hover:bg-text-color h-[50px] px-4 rounded-lg text-lg text-text-color hover:text-white flex items-center font-bold flex-shrink-0 outline outline-1 outline-outlineColor"
              onClick={handleOpenSubmit}
            >
              <ImArrowLeft
                className="rotate-90 group-hover:-rotate-180 transition max-md:mr-3 max-xl:mr-0 mr-3 mb-0.5 text-2xl"
              />
              <div className="max-xl:hidden max-md:flex ">Publicar recurso</div>
            </button>
          </div>

          <div className="flex grow justify-end items-center">
            {loggedIn ? (
              <>
                <Notifications />
                <AccountMenu />
              </>
            ) : (
              <button
                type="button"
                className="group bg-orange hover:bg-text-color px-4 h-10 mr-14 max-sm:ml-2 rounded text-white flex items-center font-bold flex-shrink-0"
                onClick={loginBarrier}
              >
                Entrar
              </button>
            )}

          </div>
        </div>
      </div>
    </>
  );
}

export function MobileSearch({ setFilterState, filterState, handleToggleMobileSearch }) {
  return (
    <div className="flex w-full items-center">
      <SearchComponent setFilterState={setFilterState} filterState={filterState} />
      <button
        type="button"
        alt="Fechar busca"
        title="Fechar busca"
        className={"bg-text-color w-10 h-10 mr-2 rounded text-white shrink-0  transition-all duration-30000 hover:bg-blue-button"}
        onClick={handleToggleMobileSearch}
      >
        <CloseIcon className="h-full text-3xl " />
      </button>
    </div>
  );
}

/**
 * @param {Object} props
      * @param {Function} props.setQuery - seta o query
      * @returns header
      */
export default function Header({ setFilterState, filterState, mobileSearch}) {
  const [needLoginOpen, setNeedLoginOpen] = useState(false);
  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);

  // Função para alternar a exibição da pesquisa no mobile
  const handleToggleMobileSearch = () => {
    setTimeout(() => {
      setMobileSearchOpen((curr) => !curr);
    }, 100);
  };

  return (
    <div className="fixed flex items-center max-md:h-[100px] h-[120px] xl:top-[35px] top-[46px] z-10 shadow-none w-screen 
                      bg-fundo
                      bg-repeat
                      bg-fixed
                      ">
      <div className="flex flex-grow gap-3 sm:gap-12 justify-between 
                      ">
        {mobileSearchOpen || mobileSearch.searchIsClicked ? (
          <MobileSearch handleToggleMobileSearch={handleToggleMobileSearch} setFilterState={setFilterState} filterState={filterState} />
        ) : (
          <DefaultContent
            handleToggleMobileSearch={handleToggleMobileSearch}
            setNeedLoginOpen={setNeedLoginOpen}
            setFilterState={setFilterState}
            filterState={filterState}
          />
        )}
      </div>
      <NeedLoginModal open={needLoginOpen} setOpen={setNeedLoginOpen} />
    </div>
  );
}