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

export default function NavbarHumas() {


    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 maxWidth='full' isBlurred={true} className='h-28 md:h-36'>
            <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'>
                    <div>Beranda</div>
                    <div>
                        <Dropdown>
                            <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 />}
                                >
                                    Tentang Humas POLRI
                                </DropdownItem>
                                <DropdownItem
                                    endContent={<ChevronRightWhite />}
                                >
                                    Profile Pimpinan POLRI
                                </DropdownItem>
                                <DropdownItem
                                    endContent={<ChevronRightWhite />}>
                                    Struktur Organisasi
                                </DropdownItem>
                                <DropdownItem
                                    endContent={<ChevronRightWhite />}>
                                    Visi & Misi
                                </DropdownItem>
                                <DropdownItem
                                    endContent={<ChevronRightWhite />}>
                                    Tugas & Fungsi
                                </DropdownItem>
                                <DropdownItem
                                    endContent={<ChevronRightWhite />}>
                                    Logo
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                    <div>Portal PPID</div>
                    <div>Pelayanan Masyarakat</div>
                    <div>Kontak</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">
                        <div><FbIcon /></div>
                        <div><IgIcon /></div>
                        <div><YtIcon /></div>
                        <div><TwIcon /></div>
                        <div><TtIcon /></div>
                    </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>
    )
}