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

export default function NavbarHumas() {

    const handleClick = () => {
        console.log('Link clicked!');
    };
    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
            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>
    )
}