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 border-2 border-red-900' />
                    </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>
                            <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='/portal-ppid' 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 '>
                        <NavbarItem>
                            <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='/portal-ppid' color='foreground'>
                                Kontak
                            </Link>
                        </NavbarItem>
                        <div><ThemeSwitch /></div>
                    </div>
                    <NavbarContent className="sm:hidden basis-1 pl-4" justify="end">
                        <ThemeSwitch />
                        <NavbarMenuToggle />
                    </NavbarContent>
                </div>
            </div> */}
        </Navbar>
    )
}