import { type ComponentPropsWithoutRef } from 'react';
import { type VirtualizerOptions } from '@tanstack/react-virtual';
import { type SelectBoxSlotRecipeVariant } from '../../styled-system/recipes';
import { type SearchBoxProps } from '../SearchBox';
import { type PopoverProps } from '../Popover';
import { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';
type AllowedValueTypes = string | number | undefined;
export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
export type InfiniteScrollConfig = {
    /**
     * Enable infinite scroll functionality.
     * When enabled, additional options can be loaded dynamically when scrolling.
     *
     * @default false
     */
    enabled?: boolean;
    /**
     * Callback executed when more options need to be loaded.
     * Called when user scrolls near the top or bottom of the options list.
     *
     * @param direction - The direction of loading ('forward' for bottom, 'backward' for top)
     */
    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
    /**
     * Whether there are more options available to load in the forward direction (bottom).
     * Used to determine if infinite scroll should trigger when scrolling down.
     *
     * @default true
     */
    hasNextPage?: boolean;
    /**
     * Whether there are more options available to load in the backward direction (top).
     * Used to determine if infinite scroll should trigger when scrolling up.
     *
     * @default true
     */
    hasPreviousPage?: boolean;
    /**
     * The scroll threshold in pixels for triggering infinite scroll.
     * When the scroll position is within this distance from the top or bottom,
     * the onLoadMore callback will be triggered.
     *
     * @default 100
     */
    threshold?: number;
    /**
     * The error message to display when loading fails.
     * This message supports internationalization.
     *
     * @default "Failed to load data"
     */
    errorMessage?: string;
    /**
     * The text for the retry button when loading fails.
     * This message supports internationalization.
     *
     * @default "Retry"
     */
    retryButtonText?: string;
};
export type BasedAdditionalProps = Record<string, unknown>;
export type SelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = ({
    /**
     * The label to be displayed in the list.
     *
     * This would be the group label of the nested list when options prop is provided.
     */
    label: string;
    /**
     * This must be omitted when the options prop is provided.
     */
    value?: never;
    /**
     * The options to be nested under the group label.
     */
    options?: SelectBoxOption<T, AdditionalProps>[];
} & AdditionalProps) | ({
    /**
     * The label to be displayed in the list.
     */
    label: string;
    /**
     * The value to be returned when the option is selected.
     *
     * This must be unique for each option since it's used to identify the option in the list.
     */
    value?: T;
    /**
     * This must be omitted when the value prop is provided.
     */
    options?: never;
    /**
     * Whether this option is disabled.
     */
    disabled?: boolean;
} & AdditionalProps);
/**
 * A flattened option type representing an individual selectable option (not a group).
 * Used for keyboard navigation and virtualization.
 */
export type FlatOption<T extends AllowedValueTypes = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = Extract<SelectBoxOption<T, AdditionalProps>, {
    value?: T;
}>;
export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = {
    /**
     * The id of this component.
     * This prop is used to relate the component to the corresponding label.
     *
     * @example
     * ```tsx
     * <label htmlFor="select-box-label">Label</label>
     * <SelectBox id="select-box-label" />
     * ```
     */
    id?: string;
    /**
     * Configuration for automatically scrolling to the selected option when opening the dropdown.
     * When set to false or undefined, no auto-scrolling occurs.
     * When set to true, uses default settings (smooth behavior, center alignment).
     * When an object is provided, allows customizing the scroll behavior.
     *
     * Please note that enabling this feature will make force the whole page to be scrolled to the selected option.
     *
     * @example
     * ```tsx
     * // Default smooth scroll to center
     * <SelectBox enableAutoScrollToSelectedOption={true} />
     *
     * // Custom scroll behavior
     * <SelectBox enableAutoScrollToSelectedOption={{ behavior: 'auto', block: 'nearest' }} />
     * ```
     */
    enableAutoScrollToSelectedOption?: boolean | ScrollIntoViewOptions;
    /**
     * The properties for the popover content panel.
     *
     * @property className - The class name of the popover content panel.
     *
     * @property minWidth - The minimum width of the popover content panel.
     *
     * @property allowedPlacements - Allowed placements for the popover relative to the trigger element.
     */
    popoverContentProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'> & {
        minWidth?: PopoverProps['minWidth'];
        allowedPlacements?: PopoverProps['allowedPlacements'];
    };
    /**
     * The properties for the popover wrapper element.
     *
     * @property maxHeight - The maximum height of the popover wrapper element.
     */
    popoverWrapperProps?: {
        maxHeight?: PopoverProps['maxHeight'];
    };
    /**
     * The properties for the trigger element.
     *
     * @property aria-label - The alternative text for the trigger element.
     *
     * @property className - The class name of the trigger element.
     */
    triggerProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'className'>;
    /**
     * Whether you let user to clear the content or not.
     * This will add the Clear button if current SelectBox has value.
     *
     * @default false
     */
    enableClearButton?: boolean;
    /**
     * The properties for the clear button.
     * If this prop is not passed, the default values for each property will be applied.
     *
     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
     *
     * @default undefined
     */
    clearButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
    /**
     * The size of the SelectBox component.
     */
    size?: SelectBoxSlotRecipeVariant['size'];
    /**
     * The selectable options for the list
     *
     * It should be an array of objects with `label` and `value` properties.
     *
     * **Tip**: Use `satisfies` for automatic type inference when using additional properties:
     * ```tsx
     * const options = [...] satisfies SelectBoxOption<string, YourType>[];
     * <SelectBox options={options} /> // Type inference works automatically!
     * ```
     */
    options?: SelectBoxOption<T, AdditionalProps>[];
    /**
     * Pass the initial selected option value.
     * Use this prop when you want an uncontrolled component.
     *
     * Pass a SelectBoxOption object with both label and value.
     * This is especially useful for async scenarios where the option may not be in the current options list.
     */
    defaultValue?: SelectBoxOption<T, AdditionalProps>;
    /**
     * Pass the currently selected option value.
     * Use this prop when you want a controlled component.
     * Should use this prop with "onChange" prop to control the selected option.
     *
     * Pass a SelectBoxOption object with both label and value.
     * This is especially useful for async scenarios where the option may not be in the current options list.
     */
    value?: SelectBoxOption<T, AdditionalProps>;
    /**
     * Text to be displayed when options are not selected.
     *
     * @deprecated Placeholder is discouraged by the design guidelines. It will be removed in a future version.
     */
    placeholder?: string;
    /**
     * The message to be displayed in the listbox when the options are empty.
     */
    emptyMessage?: string;
    /**
     * Whether the trigger is disabled.
     */
    disabled?: boolean;
    /**
     * Whether the trigger is invalid.
     */
    invalid?: boolean;
    /**
     * Whether the popover width should be constrained to match the trigger element width.
     *
     * When enabled, the popover will have the same width as the trigger element,
     * preventing it from expanding beyond the trigger boundaries even if option
     * labels are longer. This is useful for maintaining consistent visual alignment
     * in forms and handling very long option text.
     *
     * @default false
     */
    enableConstrainedPopoverWidth?: boolean;
    /**
     * The DOM node where the dropdown menu should be rendered.
     *
     * If provided, the menu is rendered inside this node. Otherwise, a suitable
     * DOM node is chosen automatically.
     */
    targetDOMNode?: HTMLElement | null;
    /**
     * The name of the input element.
     *
     * It's used to identify the input element in the form.
     */
    name?: string;
    /**
     * The callback function that is called when the selected option is changed.
     *
     * @param option - The full option object that was selected (includes additional properties if defined)
     *
     * @example
     * ```tsx
     * <SelectBox
     *   onChange={(value, option) => {
     *     console.log('Selected value:', value);
     *     console.log('Full option:', option); // Access additional option properties
     *   }}
     * />
     * ```
     */
    onChange?: (option: SelectBoxOption<T, AdditionalProps> | null) => void;
    /**
     * The callback function that is called when the SelectBox loses focus.
     * This will only fire when the user truly leaves the component (not when the popover opens).
     *
     * @param event - The blur event from the trigger element
     *
     * @example
     * ```tsx
     * <SelectBox
     *   onBlur={(event) => {
     *     console.log('SelectBox lost focus');
     *     // Perform validation or other actions
     *   }}
     * />
     * ```
     */
    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
    /**
     * The function to customize what displays inside the trigger button.
     * - Return only elements that are allowed to be contained inside the `<button>` element.
     * - When the `placeholder` prop is set and no option is selected, the `placeholder` is prioritized over the `renderDisplayValue` prop.
     */
    renderDisplayValue?: (selectedOption: SelectBoxOption<T, AdditionalProps> | null) => React.ReactNode;
    /**
     * The function to customize how the options are rendered in the list.
     *
     * @param option - The option object being rendered (includes additional properties if defined)
     *
     * @param isSelected - Whether the option is currently selected
     *
     * @example
     * ```tsx
     * // Access additional properties in renderOption
     * const options = [
     *   { label: 'A', value: '1', customProp: 'foo' }
     * ] satisfies SelectBoxOption<string, { customProp: string }>[];
     *
     * <SelectBox
     *   options={options}
     *   renderOption={(option, isSelected) => (
     *     <div>{option.label} - {option.customProp}</div>
     *   )}
     * />
     * ```
     */
    renderOption?: (option: SelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
    /**
     * The function to customize how the popover is rendered.
     * - `searchNode` is the search input element. It's available only when `enableSearchOptions` is `true`.
     * - `optionsNode` is the list of options.
     */
    renderPopoverContent?: (nodes: {
        optionsNode: React.ReactNode;
        searchNode: React.ReactNode | null;
    }) => React.ReactNode;
    /**
     * The flag to enable search functionality
     */
    enableSearchOptions?: boolean;
    /**
     * The message to be displayed when the options are not found.
     */
    notFoundMessage?: string;
    /**
     * The properties for the SearchBox component.
     */
    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder'>;
    /**
     * Flag to indicate loading state of the options.
     * When true, the SelectBox will display skeleton placeholders
     * in the options list.
     */
    loading?: boolean;
    /**
     * Handler executed when text is entered in the search box.
     * The handler is debounced by 300ms.
     *
     * When this prop is provided, client-side filtering is disabled as it's
     * assumed that filtering will be handled by the prop.
     */
    onSearchOptions?: (text: string) => void;
    /**
     * Callback fired when the open state of the SelectBox changes.
     *
     * @param open - The new open state of the SelectBox.
     */
    onOpenStateChanged?: (open: boolean) => void;
    /**
     * Flag to show a divider between group options in the list.
     * When true, a divider is shown between group options except the first one.
     *
     * @default false
     */
    showGroupOptionDivider?: boolean;
    /**
     * The properties for the trigger wrapper element.
     *
     * @property className - The class name of the trigger wrapper div.
     */
    triggerWrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
    /**
     * Enable auto unmounting of the popover content when it's not displayed.
     * When true, the popover content will return null instead of hiding via CSS.
     *
     * @default true
     */
    enableAutoUnmount?: boolean;
    /**
     * Enable virtualization for large option lists.
     * When enabled, only visible options are rendered to improve performance.
     *
     * Recommended for lists with 100+ options.
     *
     * @default false
     *
     * @example
     * ```tsx
     * <SelectBox options={largeList} enableVirtualization />
     * ```
     */
    enableVirtualization?: boolean;
    /**
     * Configuration for virtualization behavior.
     * Only applies when `enableVirtualization` is true.
     *
     * @example
     * ```tsx
     * <SelectBox
     *   enableVirtualization
     *   virtualizationOptions={{
     *     estimateSize: (index) => 48, // Function returning size in pixels
     *     overscan: 10                 // Number of items outside visible area
     *   }}
     * />
     * ```
     */
    virtualizationOptions?: VirtualOptionTypes;
    /**
     * Infinite scroll configuration.
     * When provided, enables infinite scroll functionality for loading additional options dynamically.
     *
     * @example
     * ```tsx
     * <SelectBox
     *   infiniteScroll={{
     *     enabled: true,
     *     onLoadMore: async (direction) => {
     *       if (direction === 'forward') {
     *         const nextOptions = await loadNextPage();
     *         setOptions(prev => [...prev, ...nextOptions]);
     *       } else {
     *         const prevOptions = await loadPreviousPage();
     *         setOptions(prev => [...prevOptions, ...prev]);
     *       }
     *     },
     *     hasNextPage: hasMore,
     *     hasPreviousPage: hasPrevious,
     *     threshold: 50 // Trigger when within 50px of edges
     *   }}
     * />
     * ```
     */
    infiniteScroll?: InfiniteScrollConfig;
};
export { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';