import * as react from 'react';
import { ReactNode } from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

type MultiSelectValue = (string | number)[];
type MultiSelectVariant = "tag" | "text";
type MultiSelectSize = "xs" | "sm" | "md" | "lg" | "xl";
type MultiSelectOptionOverflow = "truncate" | "wrap" | "scroll";
type MultiSelectState = "default" | "hover" | "focus" | "disable" | "error";
interface MultiSelectOption {
    label: ReactNode;
    value: string | number;
    disabled?: boolean;
}
interface MultiSelectProps extends ThemeOverrideProps {
    /**
     * Property to define options for the multi-select.
     */
    options: MultiSelectOption[];
    /**
     * Property for specifying the placeholder of the control.
     * @default "Select"
     */
    placeholder?: string;
    /**
     * Property for specifying the value of the control.
     */
    value?: MultiSelectValue;
    /**
     * Function that will be called when the value changes.
     */
    onChange?: (values: MultiSelectValue) => void;
    /**
     * Property for displaying an error message and highlighting the control as invalid.
     */
    errorMessage?: string;
    /**
     * Property for changing the size of the control.
     * @default "md"
     */
    size?: MultiSelectSize;
    /**
     * Property for changing the state of the control.
     */
    state?: MultiSelectState;
    /**
     * Label text displayed above the control.
     */
    label?: string;
    /**
     * Icon displayed on the left side of the control.
     */
    iconLeft?: ReactNode;
    /**
     * Icon displayed on the right side of the control (overrides default caret).
     */
    iconRight?: ReactNode;
    /**
     * Property to disable the control.
     */
    disabled?: boolean;
    /**
     * Display type of selected options (as Tag component or as plain text with comma-separated list).
     * @default "tag"
     */
    variant?: MultiSelectVariant;
    /**
     * Makes the height fixed (if false) or dependent on the content inside (if true).
     * @default true
     */
    flexible?: boolean;
    /**
     * Switch on displaying a remove button in each tag.
     * @default true
     */
    removeTagsButtons?: boolean;
    /**
     * Add clear all button.
     * @default false
     */
    extraClear?: boolean;
    /**
     * Maximum height of the dropdown menu.
     * @default 300
     */
    maxHeight?: number;
    /**
     * How long option labels in the dropdown handle horizontal overflow.
     * - `"truncate"` — clamp each label to a single line with an ellipsis.
     * - `"wrap"` — allow labels to wrap onto multiple lines (rows grow taller).
     * - `"scroll"` — keep labels on one line and scroll the list horizontally
     *   (legacy behavior). Web only — falls back to `"wrap"` on native, which
     *   cannot horizontally scroll a text row.
     * @default "truncate"
     */
    optionOverflow?: MultiSelectOptionOverflow;
    /**
     * When true, shows a search input at the top of the built-in dropdown that
     * filters options in memory by their label as the user types. Mirrors the
     * `searchable` behavior of the Select component. Web only — ignored on
     * native and when `dropdownMenu` is false.
     * @default false
     */
    searchable?: boolean;
    /**
     * Placeholder text for the search input. Only used when `searchable` is true.
     * @default "Search"
     */
    searchPlaceholder?: string;
    /**
     * Message shown in the dropdown when the search filter matches no options.
     * Only used when `searchable` is true.
     * @default "No results"
     */
    noOptionsMessage?: string;
    /**
     * When false, the built-in options list and backdrop are not shown and the control
     * does not open on click. Use with an external picker (e.g. grouped select) wired
     * to the same `value` / `onChange`.
     * @default true
     */
    dropdownMenu?: boolean;
    /**
     * When `dropdownMenu` is false: fired when the user activates the field (same gesture
     * that would open the built-in list). Typically toggle an external panel.
     */
    onTriggerPress?: () => void;
    /**
     * When `dropdownMenu` is false: whether an external menu/panel is open — drives
     * chevron direction and control layering like the built-in open state.
     */
    menuOpen?: boolean;
    /**
     * When `dropdownMenu` is false: `min-width` of the field in px so it aligns with
     * a typical grouped panel (default **540**, same as `GroupSelect`). Use `0` for
     * no minimum. Ignored when the built-in dropdown is enabled.
     */
    menuMinWidth?: number;
    testID?: string;
}

declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLDivElement>>;

export { MultiSelect, type MultiSelectOption, type MultiSelectOptionOverflow, type MultiSelectProps, type MultiSelectSize, type MultiSelectState, type MultiSelectValue, type MultiSelectVariant };