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

const SEARCH_PLACEHOLDER = 'Contract Type';

export interface ContractTypeDropdownPropTypes {
    className?: string;
    compact?: boolean;
    isDisabled?: boolean;
    fieldTextMaxWidth?: number;
    menuMaxWidth?: number;
    onChange: (e: ListViewItem | undefined) => void;
    placeholder?: string;
    value?: string;
}

export const ContractTypeDropdown: React.FC<ContractTypeDropdownPropTypes> = ({
    className = '',
    compact = false,
    isDisabled = false,
    fieldTextMaxWidth,
    menuMaxWidth,
    onChange,
    placeholder = SEARCH_PLACEHOLDER,
    value,
}) => {
    const contractTypes: any = Object.entries(CONTRACT_TYPES).map(
        ([key, value]) => ({
            label: value,
            value: key,
        })
    );

    return (
        <Select
            className={`SelectType ${className}`}
            disabled={isDisabled}
            fieldTextMaxWidth={fieldTextMaxWidth}
            id="contractType"
            menuMaxWidth={menuMaxWidth}
            onChange={onChange}
            options={contractTypes}
            placeholder={placeholder}
            selectedValue={value}
            testId="contractType"
            compact={compact}
        />
    );
};

export default ContractTypeDropdown;