import React from 'react';
import { Dropdown } from '@theorchard/suite-components';
import { ADJUSTMENT_STATUSES } from 'src/apollo/type-constants/adjustment';
import { getSelectedOptions } from 'src/utils/searchable-dropdown-option';
import type { StatementPeriodAdjustmentFileStatusOptions } from 'src/apollo/definitions/globalTypes';

export interface AdjustmentFileStatusSelectPropTypes {
    className?: string;
    isClearable?: boolean;
    isDisabled?: boolean;
    id: string;
    isMultiSelect?: boolean;
    isLoading?: boolean;
    onChange: any;
    name: string;
    placeholder?: string;
    value?: StatementPeriodAdjustmentFileStatusOptions[] | [];
}

export const AdjustmentFileStatusSelect: React.FC<
    AdjustmentFileStatusSelectPropTypes
> = ({
    className = '',
    isClearable = true,
    isDisabled = false,
    id,
    isMultiSelect = false,
    isLoading = false,
    name,
    onChange,
    placeholder = '',
    value,
}) => (
    <Dropdown
        className={`SelectAdjustmentFileStatus ${className}`}
        closeMenuOnSelect={!isMultiSelect}
        id={id}
        isClearable={isClearable}
        isDisabled={isDisabled}
        isMulti={isMultiSelect}
        name={name}
        onChange={onChange}
        options={ADJUSTMENT_STATUSES}
        value={getSelectedOptions(ADJUSTMENT_STATUSES, value)}
        placeholder={placeholder}
        isLoading={isLoading}
    />
);