'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>
    )
}