import React, { useMemo } from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { getSelectedOptions } from 'src/utils/searchable-dropdown-option';
import type { DropdownOption } from '@theorchard/suite-components';

export interface PaymentMethodDropdownPropTypes {
    className?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    id: string;
    isMultiSelect?: boolean;
    onChange: React.EventHandler<any>;
    name: string;
    placeholder?: string;
    value?: string | null;
    options?: DropdownOption[];
}

export const PaymentMethodDropdown: React.FC<
    PaymentMethodDropdownPropTypes
> = ({
    className = '',
    isClearable = false,
    isDisabled = true,
    id,
    isMultiSelect = false,
    name,
    onChange,
    options,
    placeholder = 'Select Payment Method',
    value,
}) => {
    const _value = useMemo(() => {
        if (!value) return null;

        const foundOption = getSelectedOptions(options, value);

        if (foundOption) return foundOption;

        return {
            label: value,
            value: value,
        };
    }, [options, value]);

    return (
        <Dropdown
            className={`SelectPaymentMethod ${className}`}
            closeMenuOnSelect={!isMultiSelect}
            id={id}
            isSearchable={false}
            isClearable={isClearable}
            isDisabled={isDisabled}
            name={name}
            onChange={onChange}
            options={options}
            value={_value}
            placeholder={placeholder}
            isLoading={false}
            selectedValue={value || undefined}
        />
    );
};

export default PaymentMethodDropdown;