import React from 'react';
import { MultiSelect, Status } from '@theorchard/suite-components';
import { ADJUSTMENT_FILE_STATUSES } from 'src/apollo/type-constants/adjustment';
import type { ListViewItem } from '@theorchard/suite-components';
import type { StatementPeriodAdjustmentFileStatusOptions } from 'src/apollo/definitions/globalTypes';

const SEARCH_PLACEHOLDER = 'Status';

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

export const AdjustmentFileStatusMultiSelect: React.FC<
    AdjustmentFileStatusMultiSelectPropTypes
> = ({
    className = '',
    compact = false,
    isDisabled = false,
    menuMaxWidth,
    onChange,
    value,
}) => (
    <MultiSelect
        className={`SelectAdjustmentFileStatus ${className}`}
        disabled={isDisabled}
        id="adjustmentFileStatus"
        menuMaxWidth={menuMaxWidth}
        onChange={onChange}
        options={ADJUSTMENT_FILE_STATUSES}
        placeholder={SEARCH_PLACEHOLDER}
        requireApply
        selectedValue={value}
        testId="adjustmentFileStatus"
        components={{
            OptionLabel: ({ option }: any) => (
                <Status
                    data-testid="adjustment-file-status"
                    filled={option.filled}
                    size="medium"
                    text={option.label || ''}
                    variant={option.variant}
                />
            ),
        }}
        compact={compact}
    />
);