import React, { useMemo } from 'react';
import { Select } from '@theorchard/suite-components';
import type { ListViewItem } from '@theorchard/suite-components';
import { CONTRACT_TYPE_MAP } from 'src/apollo/type-constants/contract';

export interface ContractTypesDropdownPropTypes {
    className?: string;
    id: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    onChange: (e: ListViewItem | undefined) => void;
    placeholder?: string;
    removeOptions?: string[];
    testId?: string;
    value: string | null;
}

export const ContractTypesDropdown: React.FC<
    ContractTypesDropdownPropTypes
> = ({
    className = '',
    id,
    isClearable = false,
    isDisabled = false,
    onChange,
    placeholder = 'Select',
    removeOptions,
    testId,
    value,
}) => {
    const contractTypes = useMemo(() => {
        return Object.keys(CONTRACT_TYPE_MAP)
            .filter(key => !removeOptions?.includes(key))
            .map(key => ({
                label: CONTRACT_TYPE_MAP[key],
                value: key,
            }));
    }, [removeOptions]);

    return (
        <Select
            className={`SelectContractType ${className}`}
            disabled={isDisabled}
            id={id}
            hideClearButton={!isClearable}
            onChange={onChange}
            options={contractTypes}
            placeholder={placeholder}
            selectedValue={value || undefined}
            testId={testId}
        />
    );
};

export default ContractTypesDropdown;