"use client";
import { Link } from "@nextui-org/link";
import {
  Navbar,
  NavbarContent,
  NavbarItem,
  NavbarMenuToggle,
} from "@nextui-org/navbar";
import {
  Button,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  DropdownTrigger,
} from "@nextui-org/react";
import {
  ChevronDownIcon,
  ChevronRightIcon,
  FbIcon,
  IdnIcon,
  IgIcon,
  TtIcon,
  TwIcon,
  YtIcon,
} from "../../icons";
import { ThemeSwitch } from "../../theme-switch";

export default function NavbarPPID() {
  return (
    <Navbar maxWidth="full" height="8rem" className="dark:bg-[#1F1A17]">
      <div className="w-full h-full flex">
        <div className="w-1/3 md:w-2/12 flex">
          <Link href={"/"}>
            <img
              src="/e-ppid.png"
              alt="logo"
              className="w-auto lg:w-full h-auto lg:h-full p-0 lg:p-2 "
            />
          </Link>
        </div>
        <div className="w-10/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">
              <div>
                <FbIcon />
              </div>
              <div>
                <IgIcon />
              </div>
              <div>
                <YtIcon />
              </div>
              <div>
                <TwIcon />
              </div>
              <div>
                <TtIcon />
              </div>
            </div>
            <div>
              <IdnIcon />
            </div>
          </div>
          <div className="flex flex-wrap items-center justify-around">
            <NavbarItem className="scroll-smooth">
              <Link href="/portal-ppid" color="foreground">
                Beranda
              </Link>
            </NavbarItem>
            <Dropdown>
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    Informasi Publik
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                aria-label="tentang"
                title="Tentang"
                className="pt-4"
                classNames={
                  {
                    // base: " border-2 border-red-500 bg-white",
                    // list: "border-2 gap-2 flex flex-row flex-wrap"
                    // list: "gap-2 flex flex-row flex-wrap"s
                  }
                }
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/informasi-publik/informasi-serta-merta"
                    color="foreground"
                  >
                    Informasi Serta Merta
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/informasi-publik/informasi-berkala"
                    color="foreground"
                  >
                    Informasi Berkala
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/informasi-publik/informasi-setiap-saat"
                    color="foreground"
                  >
                    Informasi Setiap Saat
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/informasi-publik/informasi-dikecualikan"
                    color="foreground"
                  >
                    Informasi Dikecualikan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/informasi-publik/penerangan-satuan"
                    color="foreground"
                  >
                    Penerangan Satuan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/informasi-publik/uu-dan-peraturan"
                    color="foreground"
                  >
                    UU & Peraturan
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown>
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    Profile
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                aria-label="tentang"
                title="Tentang"
                className="pt-4"
                classNames={
                  {
                    // base: " border-2 border-red-500 bg-white",
                    // list: "border-2 gap-2 flex flex-row flex-wrap"
                    // list: "gap-2 flex flex-row flex-wrap"s
                  }
                }
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/profile/sejarah-ppid-polri"
                    color="foreground"
                  >
                    Sejarah PPID Polri
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/profile/profile-singkat-ppid"
                    color="foreground"
                  >
                    Profile Singkat PPID
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/profile/tugas-dan-fungsi-ppid"
                    color="foreground"
                  >
                    Tugas dan Fungsi PPID
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/profile/struktur-ppid"
                    color="foreground"
                  >
                    Struktur PPID
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/profile/visi-dan-misi-ppid"
                    color="foreground"
                  >
                    Visi & Misi PPID
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown>
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    Layanan Informasi
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                aria-label="tentang"
                title="Tentang"
                className="pt-4"
                classNames={
                  {
                    // base: " border-2 border-red-500 bg-white",
                    // list: "border-2 gap-2 flex flex-row flex-wrap"
                    // list: "gap-2 flex flex-row flex-wrap"s
                  }
                }
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/layanan-informasi/registrasi-permohonan"
                    color="foreground"
                  >
                    Registrasi Permohonan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/layanan-informasi/permohonan-informasi"
                    color="foreground"
                  >
                    Permohonan Informasi
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/layanan-informasi/permohonan-keberatan"
                    color="foreground"
                  >
                    Permohonan Keberatan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/layanan-informasi/statistik-rekapitulasi"
                    color="foreground"
                  >
                    Statistik / Rekapitulasi
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/layanan-informasi/ppid-laporan-tahunan"
                    color="foreground"
                  >
                    Laporan Informasi Publik Tahunan
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <Dropdown>
              <NavbarItem>
                <DropdownTrigger>
                  <Button
                    disableRipple
                    className="p-0 bg-transparent data-[hover=true]:bg-transparent text-medium"
                    radius="sm"
                    variant="light"
                    endContent={<ChevronDownIcon className="pt-1" />}
                  >
                    Standar Layanan
                  </Button>
                </DropdownTrigger>
              </NavbarItem>
              <DropdownMenu
                aria-label="tentang"
                title="Tentang"
                className="pt-4"
                classNames={
                  {
                    // base: " border-2 border-red-500 bg-white",
                    // list: "border-2 gap-2 flex flex-row flex-wrap"
                    // list: "gap-2 flex flex-row flex-wrap"s
                  }
                }
                itemClasses={{
                  // base: "border border-red-700 w-[350px]"
                  base: "w-[350px]",
                }}
              >
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/alur-pelayanan-informasi-publik"
                    color="foreground"
                  >
                    Alur Pelayanan Informasi Publik Polri
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/tata-cara-permohonan-informasi"
                    color="foreground"
                  >
                    Tata Cara Permohonan Informasi
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/mekanisme-keberatan"
                    color="foreground"
                  >
                    Mekanisme Keberatan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/mekanisme-permohonan-penyelesaian-sengketa"
                    color="foreground"
                  >
                    Mekanisme Permohonan Penyelesainan Sengketa
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/waktu-pelayanan"
                    color="foreground"
                  >
                    Waktu Pelayanan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/standar-biaya-pelayanan"
                    color="foreground"
                  >
                    Standar Biaya Pelayanan
                  </Link>
                </DropdownItem>
                <DropdownItem endContent={<ChevronRightIcon />}>
                  <Link
                    href="/portal-ppid/standar-layanan/maklumat-pelayanan"
                    color="foreground"
                  >
                    Maklumat Pelayanan
                  </Link>
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
            <NavbarItem>
              <Link href="/portal-ppid/regulasi" color="foreground">
                Regulasi
              </Link>
            </NavbarItem>
            <NavbarItem>
              <Link
                href="#footer-ppid"
                className="scroll-smooth"
                color="foreground"
              >
                Kontak
              </Link>
            </NavbarItem>
            <div>
              <ThemeSwitch />
            </div>
          </div>
        </div>
        <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
          <ThemeSwitch />
          <NavbarMenuToggle />
        </NavbarContent>
      </div>
      {/* <div className='w-full'>
                <div className='hidden md:flex items-end justify-end'>
                    <div className='flex items-center justify-between gap-1 md:gap-10'>
                        <div className="flex gap-1 lg:gap-3 items-center">
                            <div><FbIcon /></div>
                            <div><IgIcon /></div>
                            <div><YtIcon /></div>
                            <div><TwIcon /></div>
                            <div><TtIcon /></div>
                        </div>
                        <div ><IdnIcon /></div>
                    </div>
                </div>
                <div className='flex'>
                    <div className='w-1/3 lg:w-2/12'>
                        <Link href={'/'}>
                            <img src="/e-ppid.png" alt="logo" className='w-48' />
                        </Link>
                    </div>
                    <div className='w-2/3 lg:w-9/12 hidden md:flex flex-wrap items-center justify-evenly '>
                        
                    </div>
                    <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
                        <ThemeSwitch />
                        <NavbarMenuToggle />
                    </NavbarContent>
                </div>
            </div> */}
    </Navbar>
  );
}