"use client";
import React, { useEffect, useRef, useState } from "react";
import {
  Navbar,
  MobileNav,
  Typography,
  Button,
  IconButton,
  Collapse,
} from "@material-tailwind/react";
import Link from "next/link";
import Image from "next/image";
import ProfileMenu from "./profile_menu";
import { usePathname, useRouter } from "next/navigation";
import CheckPath from "../routeur/routeur_layout";
import { Account } from "@/api/account.api";
import SearchComponent from '@/ui/components/navbar/search-component'

export function NavbarDefault() {
  const [openNav, setOpenNav] = React.useState(false);
  const pathname = usePathname();

 const [connect, setConnect] = useState<boolean>(false);

  useEffect(()=>{
   const state = Account.isAuth()
   setConnect(state)
  },[]);

  useEffect(() => {
    window.addEventListener(
      "resize",
      () => window.innerWidth >= 960 && setOpenNav(false)
    );
  }, []);
  const menu = [
    {
      name: "Accueil",
      link: "/",
    },
    {
      name: "Formations",
      link: "/formation",
    },
    {
      name: "Inscriptions",
      link: "/inscription",
    },
    {
      name: "Blog",
      link: "/blog",
    },
    {
      name: "Espace formation",
      link: "/espace-formation",
    },
    {
      name: "Financement",
      link: "/financer-votre-formation",
    },
    {
      name: "Contact",
      link: "/contact",
    },
  ];
  const navList = (
    <ul className="mb-4 mt-2 flex flex-col lg:text-[1.3vw] xl:text-base gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
      {menu &&
        menu.map((item) => {
          return (
            <li
              key={item.name}
              className={`${
                pathname === item.link ? "menu-item_active" : "menu-item"
              }  relative font-bold text-black  hover:text-vert_fonce transition-all duration-300`}
            >
              <Link href={item.link} className="flex items-center">
                {item.name}
              </Link>
            </li>
          );
        })}
      <li>
        {/* <SearchComponent /> */}
      </li>
    </ul>
  );

  return (
    // checkpath c'est une fonction qui me permet de cacher l'entete si on est dans la partie account

     <Navbar 
      fullWidth
      className={` ${
        (CheckPath("/account/login") || CheckPath("/account/register")) &&
        "hidden"
      } sticky top-0 py-2 lg:px-8 lg:py-4 z-40 `}
    >
      <div className="xl:px-2!!!0 mx-auto flex items-center justify-between text-blue-gray-900">
        <Typography
          as="a"
          href="/"
          className="mr-4 cursor-pointer py-1.5 font-medium"
        >
          <Image
            src="/assets/img-bsl/logo bsl.png"
            width={150}
            height={48}
            alt="logo du site"
          />
        </Typography>
        <div className="hidden lg:block">
          {navList} 
        </div>
        <div></div>
        <div className="flex justify-end items-center">
          {!connect ? (
            <Link href="/account/login">
              <Button
                variant="filled"
                color="red"
                size="lg"
                className="hidden bg-vert_fonce rounded-full md:text-xs xl:text-base lg:inline-block"
              >
                {/* <Link href="https://wa.me/237697837693"  target="_blank"></Link> */}
                Se connecter
              </Button>
            </Link>
          ) : (
            <ProfileMenu />
          )}
          <IconButton
            variant="text"
            className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
            ripple={false}
            onClick={() => setOpenNav(!openNav)}
            
          >
            {openNav ? (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                className="h-6 w-6"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M6 18L18 6M6 6l12 12"
                />
              </svg>
            ) : (
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6"
                fill="none"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            )}
          </IconButton>
        </div>
      </div>
      <Collapse open={openNav} >
        <div className="container mx-auto">
          {navList}
          {!connect && (
            <Link href="/account/login">
              <Button
                
                size="md"
                fullWidth
              
                className="mb-2 bg-vert_fonce"
              >
                Se connecter
              </Button>
            </Link>
          )}
        </div>
      </Collapse>
    </Navbar>
  );
}