import React, { Fragment, useState } from 'react';
import { Menu, Transition } from '@headlessui/react';
import Select from 'react-select';

function classNames(...classes: any[]) {
    return classes.filter(Boolean).join(' ');
}

function DropdownMenu(props: any) {
    const { value = '', css = '', options } = props;
    const [selectedOption, setSelectedOption] = useState(value || '');

    const handleOptionSelect = (option: string, e: React.MouseEvent<HTMLAnchorElement>) => {
        e.preventDefault(); // Prevent default behavior of link
        setSelectedOption(option);
    };

    return (
        <div className={`${css}`}>
            {/* <Select
                options={provinceList}
                id="shipping_province"
                value={provinceList.find((options) => options.value === shipping.shipping_province)}
                className=" flex-1"
                placeholder="Enter Province"
                name="shipping_province"
                onChange={(selectedOption) => {
                    if (selectedOption) {
                        setShipping({
                            ...shipping,
                            shipping_province: selectedOption.value,
                            shipping_city: '',
                            shipping_kecamatan: '',
                        });
                    }
                }}
            /> */}
            <Menu as="div" className="dark:border-white-dark">
                <Menu.Button className="inline-flex w-full gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:border-white-dark dark:bg-[#121c2c] dark:text-white-dark">
                    {selectedOption || 'Category'}
                </Menu.Button>
                <Transition
                    as={Fragment}
                    enter="transition ease-out duration-100"
                    enterFrom="transform opacity-0 scale-95"
                    enterTo="transform opacity-100 scale-100"
                    leave="transition ease-in duration-75"
                    leaveFrom="transform opacity-100 scale-100"
                    leaveTo="transform opacity-0 scale-95"
                >
                    <Menu.Items className="dark:devide-black absolute z-10 mt-2 h-40 w-56 origin-top-right divide-y divide-gray-100 overflow-y-auto rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-[#121c2c] dark:text-white-dark">
                        <div className="py-1">
                            {options.map((option: any, index: any) => (
                                <Menu.Item key={index}>
                                    {({ active }) => (
                                        <a
                                            href="#"
                                            onClick={(e) => handleOptionSelect(option, e)}
                                            className={classNames(active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm')}
                                        >
                                            {option}
                                        </a>
                                    )}
                                </Menu.Item>
                            ))}
                        </div>
                    </Menu.Items>
                </Transition>
            </Menu>
        </div>
    );
}

export default DropdownMenu;