"use client";

import { Popover, PopoverPanel, useClose } from "@headlessui/react";
import clsx from "clsx";
import Link from "next/link";
import { useState } from "react";
import ActionArrow from "../ActionArrow";
import Container from "../NAWebsite/Container";
import MobileMenu from "../NAWebsite/Header.MobileMenu";

let mobileMenuInstance: MobileMenu | null = null;

function HamburgerIcon({ onClick }: { onClick?: () => void }) {
  return (
    <button
      type="button"
      aria-label="Menu"
      className="relative mr-[-15px]"
      onClick={onClick}
    >
      <div className="relative flex h-[50px] w-[50px] transform items-center justify-center overflow-hidden transition-all duration-200">
        <div className="flex h-[16px] w-[20px] origin-center transform flex-col justify-between overflow-hidden transition-all duration-300">
          <div className="h-[1px] w-7 origin-left transform bg-white transition-all duration-300 group-[.is-open]:translate-x-10" />
          <div className="h-[1px] w-7 transform rounded bg-white transition-all delay-75 duration-300 group-[.is-open]:translate-x-10" />
          <div className="h-[1px] w-7 origin-left transform bg-white transition-all delay-150 duration-300 group-[.is-open]:translate-x-10" />
          <div className="absolute top-2.5 flex w-0 -translate-x-10 transform items-center justify-between transition-all duration-500 group-[.is-open]:w-12 group-[.is-open]:translate-x-0">
            <div className="absolute h-[1px] w-5 rotate-0 transform bg-white transition-all delay-300 duration-500 group-[.is-open]:rotate-45" />
            <div className="absolute h-[1px] w-5 -rotate-0 transform bg-white transition-all delay-300 duration-500 group-[.is-open]:-rotate-45" />
          </div>
        </div>
      </div>
    </button>
  );
}

function Logo() {
  return (
    <svg
      width={92}
      height={38}
      viewBox="0 0 120 50"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      xmlnsXlink="http://www.w3.org/1999/xlink"
      xmlSpace="preserve"
      x="0px"
      y="0px"
      className="block"
    >
      <use xlinkHref="#general-logo" />
    </svg>
  );
}

function MobileVectorHeaderContent() {
  const closeDropdown = useClose();
  return (
    <Container>
      <div className="flex flex-col text-lg" onClick={() => closeDropdown()}>
        <Link href="/" className="py-3 text-brandRedLight">
          Overview
        </Link>
        <Link
          href="#pricing"
          className="py-3 text-white transition-colors hover:text-brandRedLight"
        >
          Pricing
        </Link>
        <Link
          href="https://github.com/pingcap/tidb-vector-python/tree/main/examples"
          target="_blank"
          rel="noopener noreferrer"
          className="group inline-flex items-center gap-x-1 py-3 text-white transition-colors hover:text-brandRedLight"
        >
          Integrations
          <ActionArrow />
        </Link>
        <Link
          href="https://docs.pingcap.com/tidbcloud/vector-search-overview"
          target="_blank"
          rel="noopener noreferrer"
          className="group inline-flex items-center gap-x-1 py-3 text-white transition-colors hover:text-brandRedLight"
        >
          Docs
          <ActionArrow />
        </Link>
      </div>
    </Container>
  );
}

// The same layout as NAWebsite Mobile Layout but with some additional menus.
export default function VectorHeaderMobile() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Popover className="group contents">
      <div
        className={clsx(
          "group sticky top-0 z-[99] bg-black text-white min-[1025px]:hidden",
          { "is-open": isOpen },
        )}
      >
        <Container className="flex h-[62px] items-center gap-4">
          <Link href="https://www.pingcap.com" title="TiDB" aria-label="Home">
            <Logo />
          </Link>
          <div className="flex-1">
            {/* <PopoverButton
              className="inline-flex cursor-pointer select-none flex-nowrap items-center gap-x-1 py-3 text-lg font-medium text-white transition-colors hover:text-brandRedLight"
              onClick={() => {
                if (!mobileMenuInstance) {
                  mobileMenuInstance = new MobileMenu();
                }
                setIsOpen(false);
                mobileMenuInstance!.closeAll();
              }}
            >
              Vector Search
              <MdOutlineKeyboardArrowDown className="text-xl transition-transform group-data-[open]:rotate-180" />
            </PopoverButton> */}
          </div>
          <HamburgerIcon
            onClick={() => {
              if (!mobileMenuInstance) {
                mobileMenuInstance = new MobileMenu();
              }
              if (mobileMenuInstance!.isOpen()) {
                setIsOpen(false);
                mobileMenuInstance!.closeAll();
              } else {
                setIsOpen(true);
                mobileMenuInstance!.openDefault();
              }
            }}
          />
        </Container>
      </div>
      <PopoverPanel
        modal
        transition
        className={clsx(
          "fixed bottom-0 left-0 right-0 top-[62px] z-[20] bg-black text-white transition duration-200 ease-out data-[closed]:-translate-y-2 data-[closed]:opacity-0 min-[1025px]:hidden",
        )}
      >
        <MobileVectorHeaderContent />
      </PopoverPanel>
    </Popover>
  );
}