import React from "react";
import type { SelectPlacement } from "../../../hooks/useSelectPortal";
/**
 * Select value option type
 * @template T The type of the option value
 */
export interface SelectOption<T = unknown> {
    /** Unique identifier for the option */
    id: string | number;
    /** Display label for the option */
    label: string;
    /** Option value */
    value: T;
    /** Whether the option is disabled */
    disabled?: boolean;
}
/**
 * Base props for all Select subcomponents
 */
export interface SelectBaseProps {
    /** Additional class names */
    className?: string;
}
/**
 * Select component props
 * @template T The type of the select value
 */
export interface SelectProps<T = unknown> extends SelectBaseProps {
    /** ID for the select component */
    id?: string;
    /** Name for the select component */
    name?: string;
    /** Size of the select component */
    size?: SelectSize;
    /** Current state of the select component */
    state?: SelectState;
    /** Currently selected option */
    value?: T;
    /** Custom display value to show in trigger (overrides selected option label) */
    displayValue?: React.ReactNode;
    /** Placeholder text when no option is selected */
    placeholder?: string;
    /** Whether the select is disabled */
    disabled?: boolean;
    /** Whether the select is required */
    required?: boolean;
    /** Array of options to display */
    options: SelectOption<T>[];
    /** Label for the select — pass a string for default styling, or a ReactNode for full control */
    label?: React.ReactNode;
    /** Helper text below the select — pass a string for default styling, or a ReactNode for full control */
    helperText?: React.ReactNode;
    /** Enable multi-select mode — value becomes T[] and chips are rendered in trigger */
    multiple?: boolean;
    /** Maximum number of chips to display before showing "+N more" (default: 3) */
    maxDisplayedChips?: number;
    /** Called when the selection changes */
    onChange?: (value: T) => void;
    /** Called when the select receives focus */
    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    /** Called when the select loses focus */
    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    /** Left icon to display in the select button */
    iconStart?: React.ReactNode;
    /** Right icon to display in the select button (default is chevron) */
    iconEnd?: React.ReactNode;
    /** Children to render instead of default options */
    children?: React.ReactNode;
    /** Component-level theme overrides */
    theme?: SelectThemeOverrides;
    /** Whether the select is searchable */
    searchable?: boolean;
    /** Placeholder text for the search input */
    searchPlaceholder?: string;
    /** Whether to use portal rendering for dropdown (default: true) */
    portal?: boolean;
    /** Placement of the dropdown relative to trigger */
    placement?: SelectPlacement;
    /** Offset between trigger and dropdown in pixels */
    offset?: number;
    /** Whether to enable typeahead functionality (default: true) */
    enableTypeahead?: boolean;
    /** Additional class name for the container wrapper */
    wrapperClassName?: string;
    /** Whether to allow creating new options (requires searchable: true) */
    creatable?: boolean;
    /** Called when a new option is created */
    onCreateOption?: (inputValue: string) => void;
    /** Custom label for the create option (default: "Create '{inputValue}'") */
    createLabel?: string | ((inputValue: string) => string);
}
/**
 * Select button props
 */
export interface SelectButtonProps extends SelectBaseProps {
    /** ID for the select button */
    id?: string;
    /** Whether the button is disabled */
    disabled?: boolean;
    /** Whether the button is open */
    isOpen?: boolean;
    /** Current state of the select */
    state?: SelectState;
    /** Size of the select */
    size?: SelectSize;
    /** Left icon to display */
    iconStart?: React.ReactNode;
    /** Right icon to display (default is chevron) */
    iconEnd?: React.ReactNode;
    /** Called when the button is clicked */
    onClick?: () => void;
    /** Called when the button receives focus */
    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    /** Called when the button loses focus */
    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    /** Children to render inside the button */
    children?: React.ReactNode;
}
/**
 * Select options container props
 */
export interface SelectOptionsProps extends SelectBaseProps {
    /** Whether the options are visible */
    isOpen?: boolean;
    /** Maximum height of the options container */
    maxHeight?: string | number;
    /** Called when the options should close */
    onClose?: () => void;
    /** Children to render inside the options container */
    children?: React.ReactNode;
    /** Whether to use portal rendering (default: true) */
    portal?: boolean;
    /** Placement of the dropdown relative to trigger */
    placement?: SelectPlacement;
    /** Offset between trigger and dropdown in pixels */
    offset?: number;
}
/**
 * Select option props
 */
export interface SelectOptionProps<T = unknown> extends SelectBaseProps {
    /** Option value */
    value: T;
    /** Whether the option is currently selected */
    isSelected?: boolean;
    /** Whether the option is disabled */
    disabled?: boolean;
    /** Called when the option is selected */
    onSelect?: (value: T) => void;
    /** Children to render inside the option */
    children?: React.ReactNode;
}
export type SelectSize = "sm" | "md" | "lg";
export type SelectState = "default" | "disabled" | "invalid";
/**
 * Theme overrides for the Select component
 */
export interface SelectThemeOverrides {
    /** Base style for the select button */
    baseStyle?: string;
    /** Container style for the entire select component */
    containerStyle?: string;
    /** Size styles for the select button */
    sizes?: Partial<Record<SelectSize, string>>;
    /** State styles for the select button */
    states?: Partial<Record<SelectState, string>>;
    /** Focus state styles for the select button */
    focusStates?: Partial<Record<SelectState, string>>;
    /** Hover state styles for the select button */
    hoverStates?: Partial<Record<SelectState, string>>;
    /** Style for the select button wrapper */
    buttonWrapperStyle?: string;
    /** Style for the select button */
    buttonStyle?: string;
    /** Style for the placeholder text (when no value selected) */
    placeholderTextStyle?: string;
    /** Style for the selected value text */
    valueTextStyle?: string;
    /** Style for the options container */
    optionsContainerStyle?: string;
    /** Style for the search input container */
    searchInputStyle?: string;
    /** Style for individual options */
    optionStyle?: string;
    /** Style for selected options */
    selectedOptionStyle?: string;
    /** Style for highlighted options (keyboard navigation) */
    highlightedOptionStyle?: string;
    /** Style for disabled options */
    disabledOptionStyle?: string;
    /** Style for create option */
    createOptionStyle?: string;
    /** Style for the helper text */
    helperTextStyle?: string;
    /** State styles for the helper text */
    helperTextStates?: Partial<Record<SelectState, string>>;
    /** Left icon style */
    iconStartStyle?: string;
    /** Right icon style */
    iconEndStyle?: string;
    /** Style for the check icon in selected options */
    checkIconStyle?: string;
    /** Icon padding styles */
    iconPadding?: {
        left?: string;
        right?: string;
    };
    /** Container style for multi-select chips */
    chipContainerStyle?: string;
    /** Style for the overflow "+N more" indicator */
    chipOverflowStyle?: string;
}
