import React from 'react';
import { MultiSelect } from '@theorchard/suite-components';
import { PAYMENT_SCHEDULES } from 'src/constants';
import type { ListViewItem } from '@theorchard/suite-components';

const SEARCH_PLACEHOLDER = 'Select Payment Schedule(s)';

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

export const PaymentScheduleMultiSelect: React.FC<
    PaymentScheduleMultiSelectPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    menuMaxWidth,
    menuMinWidth,
    onChange,
    placeholder = SEARCH_PLACEHOLDER,
    requireApply = false,
    value,
}) => {
    return (
        <>
            <MultiSelect
                className={`SelectPaymentSchedule ${className}`}
                disabled={isDisabled}
                id="paymentSchedules"
                menuMaxWidth={menuMaxWidth}
                menuMinWidth={menuMinWidth}
                onChange={onChange}
                options={PAYMENT_SCHEDULES}
                placeholder={placeholder}
                requireApply={requireApply}
                selectedValue={value}
                testId="SelectPaymentSchedule"
                compact={compact}
            />
        </>
    );
};