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

export interface YesNoSelectPropTypes {
    className?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    id: string;
    isMultiSelect?: boolean;
    onChange: any;
    name: string;
    placeholder?: string;
    value: string;
}

const options = [
    { label: 'Yes', value: 'yes' },
    { label: 'No', value: 'no' },
];

export const YesNoSelect: React.FC<YesNoSelectPropTypes> = ({
    className = '',
    isClearable = true,
    isDisabled = false,
    id,
    isMultiSelect = false,
    name,
    onChange,
    placeholder = '',
    value,
}) => (
    <>
        <Dropdown
            controlled
            className={`Select ${className}`}
            closeMenuOnSelect={!isMultiSelect}
            id={id}
            isClearable={isClearable}
            isDisabled={isDisabled}
            isMulti={isMultiSelect}
            name={name}
            onChange={onChange}
            options={options}
            value={getSelectedOptions(options, value)}
            placeholder={placeholder}
            isLoading={false}
        />
    </>
);

export default YesNoSelect;