"use client";
import { siteConfig } from "@/config/site";
import { Input } from "@heroui/input";
import {
  Navbar,
  NavbarContent,
  NavbarItem,
  NavbarMenu,
  NavbarMenuItem,
  NavbarMenuToggle,
} from "@heroui/navbar";
import {
  Button,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@heroui/react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import {
  ChevronDownIcon,
  ChevronRightIcon,
  ChevronUpIcon,
  FbIcon,
  FbIconNav,
  IdnIcon,
  IgIcon,
  SearchIcon,
  TtIcon,
  TwIcon,
  UKIcon,
  YtIcon,
} from "../../icons";
import { ThemeSwitch } from "../../theme-switch";
import Cookies from "js-cookie";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import storedLanguage from "@/store/language-store";

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(props: { size: string }) {
  const { size } = props;
  const [dropdownOpen, setDropdownOpen] = useState<DropdownOpenState>({});
  const [isOpen, setIsOpen] = useState(false);
  const router = useRouter();
  const t = useTranslations("Navbar");
  const token = Cookies.get("access_token");
  const isAuthenticated = Cookies.get("is_authenticated");
  const [isScrolled, setIsScrolled] = useState(false);

  const language = storedLanguage((state) => state.locale);
  const setLanguage = storedLanguage((state) => state.setLocale);

  useEffect(() => {
    if (!isAuthenticated) {
      onLogout();
    }
  }, [token]);

  const onLogout = () => {
    Object.keys(Cookies.get()).forEach((cookieName) => {
      Cookies.remove(cookieName, { path: "/" });
    });
    router.push("/auth");
  };

  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={t("search")}
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      type="search"
    />
  );

  // useEffect(() => {
  //   const handleScroll = () => {
  //     setIsScrolled(window.scrollY > 0);
  //   };

  //   window.addEventListener("scroll", handleScroll);

  //   return () => {
  //     window.removeEventListener("scroll", handleScroll);
  //   };
  // }, []);

  useEffect(() => {
    const mainElement = document.querySelector("main");

    const handleScroll = () => {
      if (mainElement) {
        setIsScrolled(mainElement.scrollTop > 0);
      }
    };

    mainElement?.addEventListener("scroll", handleScroll);

    return () => {
      mainElement?.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    (<Navbar
      isBordered
      maxWidth="full"
      height={size === "sm" ? "6rem" : "8rem"}
      className={`transition-all duration-300 ease-in-out backdrop-opacity-10 ${
        size === "sm"
          ? "lg:hidden !bg-white dark:!bg-black "
          : "hidden lg:block"
      } ${isScrolled ? "bg-white dark:bg-[#1F1A17] " : "bg-opacity-50"}`}
      classNames={{ wrapper: "px-0" }}
    >
      <div className="w-full h-full flex">
        <div className="w-full hidden lg:flex flex-row">
          <div
            className={`flex flex-wrap items-center justify-between px-[50px] w-full ${
              isOpen ? "bg-white dark:bg-[#1F1A17]" : "bg-transparent"
            }`}
          >
            <Link href={"/"}>
              <img src="/logohumas.png" alt="logo" className="w-[95px]" />
            </Link>
            <Dropdown
              className="bg-white dark:bg-[#1F1A17] "
              radius="none"
              classNames={{ base: "shadow-none" }}
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("pelayananMasyarakat")}
                  </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-[450px]",
                }}
              >
                <DropdownItem
                  key="sp2hp"
                  onPress={() =>
                    window.open(
                      "https://sp2hp.bareskrim.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at4.png" className="w-[35px]" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">SP2HP</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Surat Pemberitahuan Perkembangan Hasil
                        Penyidikan Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="form-info"
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm2.png" className="w-[35px]" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">
                        Formulir Permohonan Informasi
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Permohonan Formulir Informasi
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="sim"
                  onPress={() =>
                    window.open(
                      "https://www.digitalkorlantas.id/sim/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm3.png" className="w-[35px]" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Pelayanan SIM</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Untuk Pendaftaran SIM dan Perpanjangan SIM
                        Berbasis Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="erikkes"
                  onPress={() => window.open("https://erikkes.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm4.png" className="w-[35px]" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">
                        Pelayanan e-Rikkes SIM
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Pemeriksaan Kesehatan Berbasis Teknologi
                        Berbasis Online Dalam Proses Penerbitan SIM
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="eppsi"
                  onPress={() => window.open("https://eppsi.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm5.png" className="w-[35px]" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">
                        Pelayanan Test Psikologi SIM
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Pembuatan Test Psikologi SIM Berbasis Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="avis"
                  onPress={() =>
                    window.open(
                      "https://e-avis.korlantas.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm6.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Pelayanan e-Avis</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Ujian Teori SIM Berbasis Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="samsat"
                  onPress={() =>
                    window.open("https://samsatdigital.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm7.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Pelayanan Samsat Digital
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Samsat Berbasis Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="skck"
                  onPress={() =>
                    window.open("https://skck.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm8.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Pelayanan SKCK</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Pembuatan SKCK Berbasis Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="propam"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam&pli=1",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm9.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Pelayanan Propam Presisi
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Untuk Masyarakat Agar Mudah Melaporkan Sesuatu
                        Kejadian atau Kejahatan{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="dumas"
                  onPress={() =>
                    window.open("https://dumaspresisi.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm10.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Pelayanan Dumas Presisi{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Layanan Pengaduan Masyarakat Terintegrasi Berbasis
                        Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="bos"
                  onPress={() =>
                    window.open("https://bos.polri.go.id/login", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm11.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Pelayanan Binmas </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Berbasis Website Sistem Informasi Satpam
                        Online, BUJP, Pelaporan Binmas
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="clear"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm12.png" className="w-[35px]" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Clean & Clear Polri{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pelayanan Berbasis Aplikasi untuk Pengaduan Penerimaan
                        Anggota POLRI
                      </p>
                    </div>
                  </div>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>{" "}
            <Link
              href="https://eppid.polri.go.id/"
              target="_blank"
              className="font-semibold"
            >
              E-PPID
            </Link>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("informasi_publik")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("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 key="humas">
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem  key="pimpinan">
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem  key="structure">
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem  key="visi">
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem  key="fungsi">
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem  key="logo">
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("publikasi")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("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  key="humas">
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem  key="profile">
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="structure">
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="visi">
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="fungsi">
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="logo">
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("tentang")}
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                // aria-label="tentang"
                title={t("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 key="humas">
                  <Link
                    href="/static/humas-polri"
                    className="flex  justify-between"
                  >
                    {t("tentang")} Humas POLRI
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="profile">
                  <Link
                    href="/static/profile-kapolri"
                    className="flex  justify-between"
                  >
                    {t("profilPimpinan")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="struktur">
                  <Link
                    href="/static/struktur-mabes"
                    className="flex  justify-between"
                  >
                    {t("strukturOrganisasi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="visi">
                  <Link
                    href="/static/visi-misi-polri"
                    className="flex  justify-between"
                  >
                    {t("visi")} & {t("misi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="fungsi">
                  <Link
                    href="/static/tugas-dan-fungsi-polri"
                    className="flex  justify-between"
                  >
                    {t("tugas")} & {t("fungsi")}
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
                <DropdownItem key="logo">
                  <Link href="/static/logo" className="flex  justify-between">
                    Logo
                    <ChevronRightIcon />
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown
              className=" dark:bg-[#1F1A17]"
              onOpenChange={(state) => setIsOpen(state)}
            >
              <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" />}
                  >
                    {t("aplikasi_terkait")}
                  </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-[450px]",
                }}
              >
                <DropdownItem
                  key="super"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=superapps.polri.presisi.presisi&hl=en_US&gl=US",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at1.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polri Super App</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Layanan Perpanjangan SIM, Pembayaran STNK,
                        Pengaduan Masyarakat
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="mediahub"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.mediahub.mediahub_mobile",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at2.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Media Hub</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Humas Polri dalam Data
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="polisiku"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=id.co.qlue.polisiku&hl=id&gl=ID",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at3.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polisiku</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Membantu anggota Kepolisian untuk mengindetifikasi
                        masalah di lapangan{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="sp2hp"
                  onPress={() =>
                    window.open(
                      "https://sp2hp.bareskrim.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at4.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">SP2HP</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Surat Pemberitahuan Perkembangan Hasil Penyidikan Online
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="polritv"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.polritv",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at5.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polri TV</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Humas Polri dalam Audio Visual
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="polriradio"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.polritv",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at6.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Polri Radio</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Humas Polri dalam Audio
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="avis"
                  onPress={() =>
                    window.open(
                      "https://e-avis.korlantas.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm6.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">e-Avis</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Platform Ujian Teori SIM{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="erikkes"
                  onPress={() => window.open("https://erikkes.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm4.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">e-Rikkes</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Pemeriksaan Kesehatan Berbassi Teknologi Secara Online
                        dalam Proses Penerbitan SIM
                      </p>
                    </div>
                  </div>
                </DropdownItem>

                <DropdownItem
                  key="eppsi"
                  onPress={() => window.open("https://eppsi.id/", "_blank")}
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm5.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">e-PPSI</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Tes Psikologis SIM Secara Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="bos"
                  onPress={() =>
                    window.open("https://bos.polri.go.id/login", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm11.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">BOS </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Sistem Informasi Satpam Online, BUJP, Pelaporan
                        Binmas
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="signal"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=app.signal.id",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm7.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Signal</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Samsat Digital Nasional{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="skck"
                  onPress={() =>
                    window.open("https://skck.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm8.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">SKCK Online</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Pembuatan SKCK Secara Online{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="propam"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm9.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Propam Presisi</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Pelayanan Masyarakat untuk Melapor Secara Mudah
                      </p>
                    </div>
                  </div>
                </DropdownItem>

                <DropdownItem
                  key="propam2"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.stk.pengaduanpropam",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at14.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Monitoring Presisi
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi Anggota Binmas dan Satpam Polda Metro Jaya
                        Melaporkan Tugas
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="sdm"
                  onPress={() =>
                    window.open("https://penerimaan.polri.go.id/", "_blank")
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at15.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        SDM - Penerimaan POLRI
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Website untuk Memonitoring Penerimaan Anggota POLRI
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="whistle"
                  onPress={() =>
                    window.open(
                      "https://pengaduan-penerimaan.polri.go.id/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="at16.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Whistle Blowing System{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Website untuk Pengaduan Penerimaan Anggota POLRI{" "}
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="dumas"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=com.admasolusi.monitoringpresisi",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm10.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">Dumas Presisi</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Website Layanan Pengaduan Masyarakat Terintegrasi
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="clear"
                  onPress={() =>
                    window.open(
                      "https://play.google.com/store/apps/details?id=id.go.ssdmpolri.pengaduanappsbarupolri2",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm12.png" />
                    <div className="flex flex-col">
                      <p className="text-[16px] font-bold">
                        Clean and Clear POLRI{" "}
                      </p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi untuk Memonitoring Penerimaan Angota POLRI
                      </p>
                    </div>
                  </div>
                </DropdownItem>
                <DropdownItem
                  key="korlantas"
                  onPress={() =>
                    window.open(
                      "https://www.digitalkorlantas.id/sim/",
                      "_blank"
                    )
                  }
                >
                  <div className="flex flex-row gap-2">
                    <img src="pm3.png" />
                    <div className="flex flex-col  ">
                      <p className="text-[16px] font-bold">Sinar</p>
                      <p className="text-ellipsis text-[12px] font-light overflow-hidden">
                        Aplikasi dan Website Pelayanan Pendaftaran dan
                        Perpanjangan SIM
                      </p>
                    </div>
                  </div>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <div className="flex flex-col gap-2">
              <div className="flex gap-1 lg:gap-3 items-center">
                <Link
                  href="https://www.facebook.com/DivHumasPolri?_rdc=1&_rdr"
                  target="_blank"
                >
                  <div className="bg-white p-1.5 rounded-md">
                    <FbIconNav size={16} />
                  </div>
                </Link>
                <Link
                  href="https://www.instagram.com/divisihumaspolri/"
                  target="_blank"
                >
                  <IgIcon size={27} />
                </Link>
                <Link
                  href="https://www.youtube.com/user/pidhumaspolri"
                  target="_blank"
                >
                  <YtIcon size={27} />
                </Link>
                <Link href="https://twitter.com/DivHumas_Polri" target="_blank">
                  <TwIcon size={27} />
                </Link>
                <Link
                  href="https://www.tiktok.com/@divhumas_polri"
                  target="_blank"
                >
                  <TtIcon size={27} />
                </Link>
                {token ? (
                  // <Button className="bg-[#DD8306]" onPress={onLogout}>
                  //   Logout
                  // </Button>
                  (<Dropdown>
                    <DropdownTrigger>
                      <Button variant="bordered">Menu</Button>
                    </DropdownTrigger>
                    <DropdownMenu aria-label="Static Actions">
                      <DropdownItem
                        key="dashboard"
                        onPress={() => router.push("/admin/dashboard")}
                      >
                        Dashboard
                      </DropdownItem>
                      <DropdownItem key="dashboard">Profile</DropdownItem>

                      <DropdownItem
                        key="logout"
                        className="text-danger"
                        color="danger"
                        onPress={onLogout}
                      >
                        Logout
                      </DropdownItem>
                    </DropdownMenu>
                  </Dropdown>)
                ) : (
                  <Link href="/auth">
                    <Button
                      variant="bordered"
                      className="font-bold text-black border-black dark:border-white dark:text-white px-0 pl-2 rounded-md py-0"
                      endContent={<ChevronRightIcon />}
                    >
                      {t("masuk")}
                    </Button>
                  </Link>
                )}
              </div>
              <div className="flex items-center gap-3">
                <div className="hidden lg:block">{searchInput}</div>

                <a
                  className="cursor-pointer"
                  onClick={() =>
                    language === "id" ? setLanguage("en") : setLanguage("id")
                  }
                >
                  {language === "id" ? <IdnIcon /> : <UKIcon />}
                </a>
                <div>
                  <ThemeSwitch />
                </div>
              </div>
            </div>
          </div>
        </div>
        <NavbarContent
          className={`px-2 lg:hidden transition-all duration-300 ease-in-out backdrop-opacity-10 ${
            isScrolled ? "bg-white dark:bg-[#1F1A17] " : "bg-opacity-50"
          }`}
        >
          <div className="flex justify-between w-full">
            <Link href={"/"}>
              <img src="/logohumas.png" alt="logo" className="w-[78px]" />
            </Link>
            <div className="flex flex-row gap-3 items-center">
              <a
                className="cursor-pointer"
                onClick={() =>
                  language === "id" ? setLanguage("en") : setLanguage("id")
                }
              >
                {language === "id" ? <IdnIcon /> : <UKIcon />}
              </a>
              <ThemeSwitch />
              <NavbarMenuToggle />
              <NavbarMenu>
                {/* {searchInput} */}
                <div className="mt-1 flex flex-col gap-1">
                  {siteConfig.humasMenuItems.map((item) => (
                    <div key={item.key} className="relative">
                      <NavbarMenuItem>
                        {item.key === "login" ? (
                          token ? (
                            <Button
                              className="bg-[#DD8306] text-white"
                              onPress={onLogout}
                            >
                              Logout
                            </Button>
                          ) : (
                            <Link href="/auth">
                              <Button className="bg-[#DD8306] text-white">
                                Login
                              </Button>
                            </Link>
                          )
                        ) : item.key === "dashboard" ? (
                          token && (
                            <Link href="/admin/dashboard">
                              <span>{item.label}</span>
                            </Link>
                          )
                        ) : (
                          <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>{t(item.label)}</span>
                            )}
                            {item.submenu &&
                              (dropdownOpen[item.key] ? (
                                <ChevronUpIcon />
                              ) : (
                                <ChevronDownIcon />
                              ))}
                          </div>
                        )}
                      </NavbarMenuItem>
                      {dropdownOpen[item.key] && item.submenu && (
                        <div className="grid grid-cols-2 gap-2">
                          {item.submenu.map((subItem: any, subIndex) => (
                            <div key={subIndex}>
                              <Link
                                href={subItem.href}
                                target={subItem.blank ? "_black" : ""}
                                className="flex flex-row gap-2 items-center text-sm"
                              >
                                {subItem.img && (
                                  <img
                                    src={subItem.img}
                                    className="w-[35px] h-[35px] object-cover"
                                  />
                                )}
                                {subItem.multi
                                  ? t(subItem.multi)
                                  : subItem.label}
                              </Link>
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </NavbarMenu>
            </div>
          </div>
        </NavbarContent>
      </div>
    </Navbar>)
  );
}
