import React from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { keys, map } from 'lodash-es';
import { CONTRACT_TYPE_MAP } from 'src/apollo/type-constants/contract';
import { getSelectedOptions } from 'src/utils/searchable-dropdown-option';

export interface ContractTypeSelectTypes {
    className?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    id: string;
    isMultiSelect?: boolean;
    isLoading?: boolean;
    onChange: any;
    name: string;
    placeholder?: string;
    removeOptions?: string[];
    testId?: string;
    value: string | [];
}

export const ContractTypeSelect: React.FC<ContractTypeSelectTypes> = ({
    className = '',
    isClearable = true,
    isDisabled = false,
    id,
    isMultiSelect = false,
    isLoading = false,
    name,
    onChange,
    placeholder = '',
    removeOptions = [],
    testId,
    value,
}) => {
    const filterContractTypes = keys(CONTRACT_TYPE_MAP).filter(
        (x: string) => !removeOptions.includes(x)
    );
    const contractTypes: any = map(filterContractTypes, contractType => ({
        label: CONTRACT_TYPE_MAP[contractType],
        value: contractType,
    }));

    return (
        <Dropdown
            className={`SelectContractType ${className}`}
            closeMenuOnSelect={!isMultiSelect}
            id={id}
            isClearable={isClearable}
            isDisabled={isDisabled}
            isMulti={isMultiSelect}
            name={name}
            onChange={onChange}
            options={contractTypes}
            value={getSelectedOptions(contractTypes, value)}
            placeholder={placeholder}
            testId={testId}
            isLoading={isLoading}
            /* Portal to document to ensure menu is not obscured in modals.
             *  @ts-expect-error because the prop is only exposed on Dropdown.Custom */
            menuPortalTarget={document.body}
        />
    );
};

export default ContractTypeSelect;