import React from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

type GroupSelectItem = {
    id: string;
    label: string;
    disabled?: boolean;
};
type GroupSelectGroup = {
    id: string;
    label: string;
    items: GroupSelectItem[];
};
type GroupSelectProps = ThemeOverrideProps & {
    /** Accessible name for the panel root (`role="region"`). */
    ariaLabel?: string;
    /** Category list with nested selectable items */
    groups: GroupSelectGroup[];
    /** Selected item ids (flat across all groups) */
    value: string[];
    onChange: (nextValue: string[]) => void;
    /** Controlled active category id */
    activeGroupId?: string;
    /** When active category changes (controlled or uncontrolled) */
    onActiveGroupChange?: (groupId: string) => void;
    /** Placeholder for search input */
    searchPlaceholder?: string;
    /** Message when search/filter yields nothing */
    emptyMessage?: string;
    /** Left column width (Figma default 280) */
    leftColumnWidth?: number;
    /** Max height for scrollable lists */
    listMaxHeight?: number;
    /** Label for bulk-select action when not everything visible is selected */
    selectAllLabel?: string;
    /** Label when all visible items are selected */
    unselectAllLabel?: string;
    testID?: string;
};

/** Default `minWidth` of the panel root; keep in sync with MultiSelect external-field default. */
declare const GROUP_SELECT_MIN_PANEL_WIDTH = 540;
declare const GroupSelect: React.FC<GroupSelectProps>;

export { GROUP_SELECT_MIN_PANEL_WIDTH, GroupSelect, type GroupSelectGroup, type GroupSelectItem, type GroupSelectProps };