import React from 'react';
import { MultiSelect } from '@theorchard/suite-components';
import type {
    ListViewItem,
    ListViewOptions,
} from '@theorchard/suite-components';
import { APPPLY_TO_FLOWTHROUGH_PAYMENT } from 'src/apollo/type-constants/adjustment';

const SEARCH_PLACEHOLDER = 'Apply To Flowthrough Payment';

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

export const ApplyToFlowthroughPaymentSelect: React.FC<
    ApplyToFlowthroughPaymentSelectPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    menuMaxWidth,
    onChange,
    placeholder = SEARCH_PLACEHOLDER,
    value,
}) => {
    const ApplyToFlowthroughPaymentOptions = Object.entries(
        APPPLY_TO_FLOWTHROUGH_PAYMENT
    ).map(([key, value]) => ({
        label: value,
        value: key,
    })) as ListViewOptions<ListViewItem>;

    return (
        <MultiSelect
            className={`SelectApplyToFlowthroughPayment ${className}`}
            disabled={isDisabled}
            id="applyToFlowthroughPayment"
            menuMaxWidth={menuMaxWidth}
            onChange={onChange}
            options={ApplyToFlowthroughPaymentOptions}
            placeholder={placeholder}
            requireApply
            selectedValue={value}
            testId="applyToFlowthroughPayment"
            compact={compact}
        />
    );
};