"use client";
import { siteConfig } from "@/config/site";
import { Input } from "@nextui-org/input";
import {
  Navbar,
  NavbarContent,
  NavbarItem,
  NavbarMenu,
  NavbarMenuItem,
  NavbarMenuToggle,
} from "@nextui-org/navbar";
import {
  Button,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@nextui-org/react";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import {
  ChevronDownIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  FbIcon,
  IdnIcon,
  IgIcon,
  SearchIcon,
  TtIcon,
  TwIcon,
  YtIcon,
} from "../../icons";
import { ThemeSwitch } from "../../theme-switch";

interface MenuItem {
  key: string;
  label: string;
  href: URL;
  submenu?: SubMenuItem[];
}

interface SubMenuItem {
  label: string;
  href: string;
}

interface DropdownOpenState {
  [key: string]: boolean;
}

export default function NavbarHumas() {
  const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});

  const toggleDropdown = (key: any) => {
    setDropdownOpen({
      ...dropdownOpen,
      [key]: !dropdownOpen[key],
    });
  };

  const searchInput = (
    <Input
      aria-label="Search"
      classNames={{
        inputWrapper: "bg-default-100",
        input: "text-sm",
      }}
      labelPlacement="outside"
      placeholder="Search..."
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      type="search"
    />
  );
  return (
    <Navbar
      isBordered
      maxWidth="full"
      height="8rem"
      className="dark:bg-[#1F1A17]"
    >
      <div className="w-full h-full flex">
        <div className="min-w-max md:w-1/12 flex items-center justify-center">
          <Link href={"/"}>
            <Image
              height={100}
              width={100}
              src="/logohumas.png"
              alt="logo"
              className="min-w-max"
            />
          </Link>
        </div>
        <div className="w-auto md:w-11/12  hidden md:flex flex-col justify-cente pt-3 space-y-3">
          <div className="flex items-center justify-end gap-1 md:gap-5">
            <div className="flex gap-1 lg:gap-3 items-center">
              <Link
                href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
                target="_blank"
              >
                <FbIcon />
              </Link>
              <Link
                href="https://www.instagram.com/divisihumaspolri/"
                target="_blank"
              >
                <IgIcon />
              </Link>
              <Link
                href="https://www.youtube.com/user/pidhumaspolri"
                target="_blank"
              >
                <YtIcon />
              </Link>
              <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
                <TwIcon />
              </Link>
              <Link
                href="https://www.tiktok.com/@divhumas_polri"
                target="_blank"
              >
                <TtIcon />
              </Link>
            </div>
            <div>
              <IdnIcon />
            </div>
          </div>
          <div className="flex flex-wrap items-center justify-around ">
            <Link href={"/"}>
              <div>Beranda</div>
            </Link>
            <div>
              <Dropdown className=" dark:bg-[#1F1A17]">
                <NavbarItem>
                  <DropdownTrigger>
                    <Button
                      disableRipple
                      className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                      radius="sm"
                      variant="light"
                      endContent={<ChevronDownIcon className="pt-1" />}
                    >
                      Tentang
                    </Button>
                  </DropdownTrigger>
                </NavbarItem>
                <DropdownMenu
                  // aria-label="tentang"
                  title="Tentang"
                  className="pt-4"
                  classNames={{
                    // base: "flex",
                    // list: "border-2 gap-2 flex flex-row flex-wrap"
                    list: "gap-2 flex flex-row flex-wrap",
                  }}
                  itemClasses={{
                    // base: "border border-red-700 w-[350px]"
                    base: "w-[350px]",
                  }}
                >
                  <DropdownItem>
                    <Link
                      href="/tentang-humas-polri"
                      className="flex  justify-between"
                    >
                      Tentang Humas POLRI
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="/profile-pimpinan-polri"
                      className="flex  justify-between"
                    >
                      Profile Pimpinan POLRI
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="/struktur-organisasi"
                      className="flex  justify-between"
                    >
                      Struktur Organisasi
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link href="/visi-misi" className="flex  justify-between">
                      Visi & Misi
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="/tugas-dan-fungsi"
                      className="flex  justify-between"
                    >
                      Tugas & Fungsi
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link href="#" className="flex  justify-between">
                      Logo
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
            <div>
              <Link href="http://103.82.242.92:5555/" target="_blank">
                Portal PPID
              </Link>
            </div>
            <div>
              <Dropdown className="dark:bg-[#1F1A17]">
                <NavbarItem>
                  <DropdownTrigger>
                    <Button
                      disableRipple
                      className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
                      radius="sm"
                      variant="light"
                      endContent={<ChevronDownIcon className="pt-1" />}
                    >
                      Pelayanan Masyarakat
                    </Button>
                  </DropdownTrigger>
                </NavbarItem>
                <DropdownMenu
                  aria-label="pelayanan-masyarakat"
                  title="pelayanan-masyarakat"
                  className="pt-4"
                  classNames={{
                    list: "gap-2 flex flex-row flex-wrap",
                  }}
                  itemClasses={{
                    base: "w-[350px]",
                  }}
                >
                  <DropdownItem>
                    <Link
                      href={"/form-permohonan-informasi"}
                      className="flex  justify-between"
                    >
                      Formulir Permohonan Informasi
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://www.digitalkorlantas.id/sim/"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan SIM
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://erikkes.id/"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan e-Rikkes SIM
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://eppsi.id/"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan Test Psikologi SIM
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://e-avis.korlantas.polri.go.id/"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan e-Arvis
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://samsatdigital.id/"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan Samsat Digital
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan SKCK
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan Propam Presisi
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://dumaspresisi.polri.go.id/"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan Dumas Presisi
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://bos.polri.go.id/login"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Pelayanan Binmas
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                  <DropdownItem>
                    <Link
                      href="https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2"
                      target="_blank"
                      className="flex  justify-between"
                    >
                      Whistle Blower System
                      <ChevronRightIcon />
                    </Link>
                  </DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
            <div>
              <Link href={"/kontak-kami"}>Kontak</Link>
            </div>
            <div className="flex items-center gap-3">
              <div className="hidden lg:block">{searchInput}</div>
              <div>
                <ThemeSwitch />
              </div>
            </div>
          </div>
        </div>
        <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
          <ThemeSwitch />
          <NavbarMenuToggle />
          <NavbarMenu>
            {/* {searchInput} */}
            <div className="mt-1 flex flex-col gap-1">
              {siteConfig.humasMenuItems.map((item) => (
                <div key={item.key} className="relative">
                  <NavbarMenuItem>
                    <div
                      onClick={() => toggleDropdown(item.key)}
                      className="flex items-end gap-2"
                    >
                      {item.href ? (
                        <Link href={item.href} target="_blank">
                          <span>{item.label}</span>
                        </Link>
                      ) : (
                        <span>{item.label}</span>
                      )}
                      {item.submenu &&
                        (dropdownOpen[item.key] ? (
                          <ChevronUpIcon />
                        ) : (
                          <ChevronDownIcon />
                        ))}
                    </div>
                  </NavbarMenuItem>
                  {dropdownOpen[item.key] && item.submenu && (
                    <div className="pl-2">
                      {item.submenu.map((subItem, subIndex) => (
                        <div key={subIndex}>
                          <Link href={subItem.href}>{subItem.label}</Link>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </NavbarMenu>
        </NavbarContent>
      </div>
    </Navbar>
    // <Navbar
    //     shouldHideOnScroll
    //     position='static'
    //     maxWidth='full' isBlurred={true} className='h-28 md:h-36 dark:bg-[#1F1A17]'>
    //     <div className='w-1/12 min-w-max'>
    //         <img src="/logohumas.png" alt="" />
    //     </div>
    //     <div className='w-11/12 lg:w-8/12 font-semibold hidden md:block '>
    //         <div className='flex justify-around items-center'>
    //             <Link href={'/'}>
    //                 <div>Beranda</div>
    //             </Link>
    //             <div>
    //                 <Dropdown className=' dark:bg-[#1F1A17]'>
    //                     <NavbarItem>
    //                         <DropdownTrigger>
    //                             <Button
    //                                 disableRipple
    //                                 className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
    //                                 radius="sm"
    //                                 variant="light"
    //                                 endContent={<ChevronDownIcon className="pt-1" />}
    //                             >
    //                                 Tentang
    //                             </Button>
    //                         </DropdownTrigger>
    //                     </NavbarItem>
    //                     <DropdownMenu
    //                         // aria-label="tentang"
    //                         // title='Tentang'
    //                         className="pt-4"
    //                         classNames={{
    //                             // base: "flex",
    //                             // list: "border-2 gap-2 flex flex-row flex-wrap"
    //                             list: "gap-2 flex flex-row flex-wrap"
    //                         }}
    //                         itemClasses={{
    //                             // base: "border border-red-700 w-[350px]"
    //                             base: "w-[350px]"
    //                         }}
    //                     >
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}
    //                         >
    //                             <Link href='/tentang-humas-polri'>
    //                                 Tentang Humas POLRI
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}
    //                         >
    //                             <Link href='/profile-pimpinan-polri'>
    //                                 Profile Pimpinan POLRI
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='/struktur-organisasi'>
    //                                 Struktur Organisasi
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='/visi-misi'>
    //                                 Visi & Misi
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='/tugas-dan-fungsi'>
    //                                 Tugas & Fungsi
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             Logo
    //                         </DropdownItem>
    //                     </DropdownMenu>
    //                 </Dropdown>
    //             </div>
    //             <div><Link href="/portal-ppid">Portal PPID</Link></div>
    //             <div>
    //                 <Dropdown className='dark:bg-[#1F1A17]'>
    //                     <NavbarItem>
    //                         <DropdownTrigger>
    //                             <Button
    //                                 disableRipple
    //                                 className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium font font-semibold"
    //                                 radius="sm"
    //                                 variant="light"
    //                                 endContent={<ChevronDownIcon className="pt-1" />}
    //                             >
    //                                 Pelayanan Masyarakat
    //                             </Button>
    //                         </DropdownTrigger>
    //                     </NavbarItem>
    //                     <DropdownMenu
    //                         aria-label="pelayanan-masyarakat"
    //                         title='pelayanan-masyarakat'
    //                         className="pt-4"
    //                         classNames={{
    //                             list: "gap-2 flex flex-row flex-wrap"
    //                         }}
    //                         itemClasses={{
    //                             base: "w-[350px]"
    //                         }}
    //                     >
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}
    //                         >
    //                             <Link href={'/form-permohonan-informasi'}>
    //                                 Formulir Permohonan Informasi
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}
    //                         >
    //                             <Link href='https://www.digitalkorlantas.id/sim/' target="_blank">
    //                                 Pelayanan SIM
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://erikkes.id/' target="_blank">
    //                                 Pelayanan e-Rikkes SIM
    //                             </Link>

    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://eppsi.id/' target="_blank">
    //                                 Pelayanan Test Psikologi SIM
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href="https://e-avis.korlantas.polri.go.id/" target='_blank'>
    //                                 Pelayanan e-Arvis
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href="https://samsatdigital.id/" target='_blank'>
    //                                 Pelayanan Samsat Digital
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US' target='_blank'>
    //                                 Pelayanan SKCK
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam' target='_blank'>
    //                                 Pelayanan Propam Presisi
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://dumaspresisi.polri.go.id/' target='_blank'>
    //                                 Pelayanan Dumas Presisi
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://bos.polri.go.id/login' target='_blank'>
    //                                 Pelayanan Binmas
    //                             </Link>
    //                         </DropdownItem>
    //                         <DropdownItem
    //                             endContent={<ChevronRightWhite />}>
    //                             <Link href='https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2' target='_blank'>
    //                                 Whistle Blower System
    //                             </Link>
    //                         </DropdownItem>
    //                     </DropdownMenu>
    //                 </Dropdown>
    //             </div>
    //             <div>
    //                 <Link href={'/kontak-kami'}>Kontak</Link></div>
    //             <div><ThemeSwitch /></div>
    //         </div>
    //     </div>
    //     <div className='w-3/12 hidden lg:block'>
    //         <div className='flex items-center justify-between'>
    //             <div className="flex gap-1 lg:gap-3 items-center">
    //                 <Link href='https://www.facebook.com/DivHumasPolri' target='_blank'>
    //                     <FbIcon />
    //                 </Link>
    //                 <Link href='https://www.instagram.com/divisihumaspolri/' target='_blank'>
    //                     <IgIcon />
    //                 </Link>
    //                 <Link href='https://www.youtube.com/user/pidhumaspolri' target='_blank'>
    //                     <YtIcon />
    //                 </Link>
    //                 <Link href='https://twitter.com/DivHumas_Polri' target='_blank'>
    //                     <TwIcon />
    //                 </Link>
    //                 <Link href='https://www.tiktok.com/@divhumas_polri' target='_blank'>
    //                     <TtIcon />
    //                 </Link>
    //             </div>
    //             <div className=''><IdnIcon /></div>
    //         </div>
    //         <div className='pb-10 pt-3'>
    //             {searchInput}
    //         </div>
    //     </div>
    //     <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
    //         <ThemeSwitch />
    //         <NavbarMenuToggle />
    //     </NavbarContent>
    // </Navbar>
  );
}