import React from 'react';
import { Dropdown, SearchDropdown } from '@theorchard/suite-components';
import type { Product } from 'src/types';

interface DropdownMenuProps {
    menuOptions: Product[];
    handleSelect: (
        name: string,
        value: string | undefined,
        option: Product | undefined
    ) => void;
    name: string;
    title: string;
    placeholder: string;
    isDisabled?: boolean;
    isSelectable?: boolean;
    onLoadOptions?: (term: string) => Promise<Product[]>;
}

const DropdownMenu = (props: DropdownMenuProps) => {
    const {
        menuOptions,
        handleSelect,
        name,
        title,
        placeholder,
        isDisabled = false,
        isSelectable = false,
        onLoadOptions = null,
    } = props;

    return (
        <div className="bundle-dropdown">
            {title.length > 0 && (
                <div className="bundle-dropdown-title">
                    <span>{title}</span>
                </div>
            )}
            {onLoadOptions ? (
                <SearchDropdown
                    name={name}
                    defaultOptions={menuOptions}
                    placeholder={placeholder}
                    onLoadOptions={onLoadOptions}
                    onValueChanged={handleSelect}
                    isDisabled={isDisabled}
                    isSelectable={isSelectable}
                    isClearable={false}
                    className="bundle-dropdown-menu"
                />
            ) : (
                <Dropdown
                    name={name}
                    options={menuOptions}
                    placeholder={placeholder}
                    onValueChanged={handleSelect}
                    isDisabled={isDisabled}
                    isSelectable={isSelectable}
                    className="bundle-dropdown-menu"
                />
            )}
        </div>
    );
};

export default DropdownMenu;