import React from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { Icon } from "../util/icon";
import { tinaField } from "tinacms/dist/react";
import { GlobalHeader } from "../../tina/__generated__/types";

export const Header = ({ data }: { data: GlobalHeader }) => {
  const router = useRouter();

  const [isClient, setIsClient] = React.useState(false);
  React.useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <nav className="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
      <div className="container d-flex flex-column flex-md-row justify-content-between">
        <div className="flex">
            <Link
              href="/"
              className="navbar-brand container d-flex align-items-md-center"
            >
              <Icon
                tinaField={tinaField(data, "icon")}
                parentColor={data.color}
                data={{
                  name: data.icon.name,
                  color: data.icon.color,
                  style: data.icon.style,
                }}
              />
              <span data-tina-field={tinaField(data, "name")}>{data.name}</span>
            </Link>
        </div>
        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul className="navbar-nav d-flex flex-column flex-md-row">
            {data.nav &&
              data.nav.map((item, i) => {
                /*const activeItem =
                  (item.href === ""
                    ? router.asPath === "/"
                    : router.asPath.includes(item.href)) && isClient;*/
                return (
                  <li
                    key={`${item.label}-${i}`}
                    className="nav-item"
                  >
                    <Link
                      data-tina-field={tinaField(item, "label")}
                      href={`/${item.href}`}
                      className="nav-link p-2"
                    >
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            <li className="nav-item">
              <a id="redirecting" className="nav-link p-2 pe-4" href="https://www.rdv360.com/psychartherapie">Rendez-vous</a>
            </li>
          </ul>
        </div>
        <div
          className={`absolute h-1 bg-gradient-to-r from-transparent ${
            data.color === "primary" ? `via-white` : `via-black dark:via-white`
          } to-transparent bottom-0 left-4 right-4 -z-1 opacity-5`}
        />
      </div>
    </nav>
  );
};
