import React, { type FC, useCallback } from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { type DropdownOption, type SearchableDropdownOption } from 'src/types';
import { type SetParamsCallback } from 'src/utils';

export const CLASSNAME = 'ReDeliverDropdown';

interface ReDeliverOption {
    Yes: string;
    No: string;
}

export interface Props {
    disabled?: boolean;
    onChange: SetParamsCallback;
    placeholder: string;
    option?: string;
}

const createOption = (reDeliver: string): DropdownOption<ReDeliverOption> => ({
    value: reDeliver,
});

const ReDeliverDropdown: FC<Props> = props => {
    const { onChange, disabled, option, placeholder } = props;
    const priorityOptions: DropdownOption<ReDeliverOption>[] = [
        { value: 'Yes' },
        { value: 'No' },
    ];

    const handleChange = useCallback(
        (newValue?: SearchableDropdownOption<ReDeliverOption>) => {
            onChange({ reDeliver: newValue?.value });
        },
        [onChange]
    );

    let selectedOption: DropdownOption<ReDeliverOption> | null = null;
    if (option) selectedOption = createOption(option);

    return (
        <Dropdown
            name="reDeliverDropdown"
            className={CLASSNAME}
            onChange={handleChange}
            options={priorityOptions}
            isDisabled={disabled}
            value={selectedOption}
            placeholder={placeholder}
            isClearable
            controlled
        />
    );
};

export default ReDeliverDropdown;