import { default as CxLineClamp } from '../line-clamp/line-clamp.ts';
import { default as CxTypography } from '../typography/typography.ts';
import { CortexFormControl, default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { CSSResultGroup, TemplateResult, nothing } from 'lit';
import { default as CxIcon } from '../icon/icon';
import { default as CxPopup } from '../popup/popup';
import { default as CxSpinner } from '../spinner/spinner';
import { default as CxTag } from '../tag/tag';

/**
 * @summary Selects allow you to choose items from a menu of predefined options.
 *
 * @slot - The listbox options. Can be any HTML element, nested or not, as long as they have role="option".
 *         However, default logic supports only `<cx-option>` elements. Make sure to override the default logic. See region Overridable.
 *         You can use `<cx-divider>` to group items visually.
 * @slot label - The input's label. Alternatively, you can use the `label` attribute.
 * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
 * @slot suffix - Used to append a presentational icon or similar element to the combobox.
 * @slot clear-icon - An icon to use in lieu of the default clear icon.
 * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
 * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
 *
 * @event cx-change - Emitted when the control's value changes.
 * @event cx-clear - Emitted when the control's value is cleared.
 * @event cx-input - Emitted when the control receives input.
 * @event cx-focus - Emitted when the control gains focus.
 * @event cx-blur - Emitted when the control loses focus.
 * @event cx-show - Emitted when the select's menu opens.
 * @event cx-after-show - Emitted after the select's menu opens and all animations are complete.
 * @event cx-hide - Emitted when the select's menu closes.
 * @event cx-after-hide - Emitted after the select's menu closes and all animations are complete.
 * @event cx-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 * @event cx-enter - Emitted when the user presses the Enter key.
 *
 * @csspart form-control - The form control that wraps the label, input, and help text.
 * @csspart form-control-label - The label's wrapper.
 * @csspart form-control-input - The select's wrapper.
 * @csspart form-control-help-text - The help text's wrapper.
 * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
 * @csspart prefix - The container that wraps the prefix slot.
 * @csspart suffix - The container that wraps the suffix slot.
 * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
 * @csspart listbox - The listbox container where options are slotted.
 * @csspart tags - The container that houses option tags when `multiselect` is used.
 * @csspart tag - The individual tags that represent each multiselect option.
 * @csspart tag__base - The tag's base part.
 * @csspart tag__content - The tag's content part.
 * @csspart tag__remove-button - The tag's remove button.
 * @csspart tag__remove-button__base - The tag's remove button base part.
 * @csspart clear-button - The clear button.
 * @csspart expand-icon - The container that wraps the expand icon.
 *
 * @cssproperty --select-font-size - The font size of the select.
 */
export default class CxSelect extends CortexElement implements CortexFormControl {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-icon': typeof CxIcon;
        'cx-line-clamp': typeof CxLineClamp;
        'cx-popup': typeof CxPopup;
        'cx-spinner': typeof CxSpinner;
        'cx-tag': typeof CxTag;
        'cx-typography': typeof CxTypography;
    };
    private readonly formControlController;
    private readonly hasSlotController;
    private readonly localize;
    private typeToSelectString;
    private closeWatcher;
    popup: CxPopup;
    combobox: HTMLSlotElement;
    displayInput: HTMLInputElement;
    valueInput: HTMLInputElement;
    listbox: HTMLSlotElement;
    private hasFocus;
    displayLabel: string;
    currentOption: HTMLElement | undefined;
    selectedOptions: HTMLElement[];
    /**
     * The name of the select, submitted as a name/value pair with form data.
     */
    name: string;
    /**
     * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
     * value attribute will be a space-delimited list of values based on the options selected, and the value property will
     * be an array. **For this reason, values must not contain spaces.**
     */
    value: string | string[];
    /**
     * The fallback option value used when the select value does not match
     * any explicitly declared option.
     * The original unmatched value is preserved for form submission.
     */
    fallbackOptionValue: string;
    /**
     * The default value of the form control. Primarily used for resetting the form control.
     */
    defaultValue: string | string[];
    /**
     * The select's size.
     */
    size: 'small' | 'medium' | 'large';
    /**
     * Placeholder text to show as a hint when the select is empty.
     */
    placeholder: string;
    /**
     * If this property is enabled the user will be able to enter a free text value without being forced to select an option from the suggested values.
     * Otherwise, when no value is selected, the input will be cleared.
     */
    allowFreetext: boolean;
    /**
     * Allows more than one option to be selected.
     */
    multiple: boolean;
    /**
     * The maximum number of selected options to show when `multiple` is true. After the maximum, "+n" will be shown to
     * indicate the number of additional items that are selected. Set to 0 to remove the limit.
     */
    maxOptionsVisible: number;
    /**
     * Disables the select control.
     */
    disabled: boolean;
    /**
     * Adds a clear button when the select is not empty.
     */
    clearable: boolean;
    /**
     * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can
     * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.
     */
    open: boolean;
    /**
     * Enable this option to prevent the listbox from being clipped when the component is placed inside a container with
     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
     */
    hoist: boolean;
    /**
     * Enable this option to disable flip behavior of the cx-popup.
     */
    noFlip: boolean;
    /**
     * An optional element to use for syncing width/height instead of the anchor element.
     * When provided, the popup will sync its dimensions to this element rather than the anchor.
     * Can be used when free-width is false (default) and the select menu should be as wide as the content.
     */
    syncElement: HTMLElement | undefined;
    /**
     * By default, the select menu's width matches the select's width. Set this to true to make the menu as wide as the content.
     */
    freeWidth: boolean;
    /**
     * The autosize padding of the listbox dropdown.
     */
    autosizePadding: number;
    /**
     * Draws a filled select.
     */
    filled: boolean;
    /**
     * Draws a pill-style select with rounded edges.
     */
    pill: boolean;
    /**
     * The select's label. If you need to display HTML, use the `label` slot instead.
     */
    label: string;
    /**
     * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox
     * inside of the viewport.
     */
    placement: 'top' | 'bottom';
    /**
     * The select's help text. If you need to display HTML, use the `help-text` slot instead.
     */
    helpText: string;
    /**
     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
     * the same document or shadow root for this to work.
     */
    form: string | HTMLElement | undefined;
    /**
     * The select's required attribute.
     */
    required: boolean;
    /**
     * When set to true, the select will use tag elements to render selected options regardless of the `multiple` property.
     * This is useful when you want to display selected options in a more visually distinct way, such as in a tag format.
     */
    useTag: boolean;
    /**
     * When set to true, the select will not select the current option when the user presses the Enter key.
     */
    noSelectOnEnter: boolean;
    /**
     * When set to true, the select will not set the first option to be current when open.
     */
    noResetCurrent: boolean;
    /**
     * When set to true, the select will not show the dropdown.
     */
    noDropdown: boolean;
    /**
     * When set to true, the select will show a loading spinner.
     */
    loading: boolean;
    /**
     * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second is the current tag's index.
     * The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at the specified value.
     */
    getTag: (option: HTMLElement, index: number) => TemplateResult | string | HTMLElement;
    /**
     * Behavior when typing into the display input
     *
     * @type {('select' | 'filter' | 'none')}
     * 'select': default shoelace behavior, selects the first option that starts with the typed string
     * 'filter': filters out options that do not include the typed string
     * 'none'  : does not do anything,      the user cannot type
     */
    inputBehavior: 'select' | 'filter' | 'none';
    /**
     * A function that returns the value of an option. This is used to determine the value of the select when an option is selected.
     *
     * @param option The option to get the value for
     * @returns The value
     */
    getOptionValue: (option: HTMLElement) => string;
    /**
     *
     * @param option The option to get the label for
     * @returns The label
     */
    getOptionLabel: (option: HTMLElement) => string;
    /**
     *
     * @param option The option to get the selected state for
     * @returns The selected state
     */
    getOptionSelected: (option: HTMLElement) => boolean | undefined;
    /**
     *
     * @param option The option to get the disabled state for
     * @returns The disabled state
     */
    getOptionDisabled: (option: HTMLElement) => boolean | undefined;
    stayOpenOnSelect: boolean;
    /**
     * When set to true, the `cx-change` event will be emitted on every change of the value, even if the value is not changed.
     */
    forceOnChange: boolean;
    /**
     * When set to true, the select will wait for the next frame to focus the display input.
     * This is useful to avoid the focus being lost when the mouse down event is triggered.
     * But still allows the mouse down event not to be prevented default behavior.
     */
    allowDefaultMouseDown: boolean;
    /**
     * The text to display when no options are found.
     */
    noOptionText: string;
    /**
     * Gets whether to show the no options message
     */
    private get shouldShowNoOptionsMessage();
    /**
     * Gets the validity state object
     */
    get validity(): ValidityState;
    /**
     * Gets the validation message
     */
    get validationMessage(): string;
    /**
     *
     * @param option The option to update the selected state
     * @param selected If undefined, the option will be toggled. If true, the option will be selected. If false, the option will be unselected.
     * @returns
     */
    setOptionSelected(option: HTMLElement, selected?: boolean): void;
    /**
     *
     * current = whether the option is currently focused on e.g via keyboard
     * @param option The option to update the current state
     * @param current If undefined, the option will be toggled. If true, the option will be set as current. If false, the option will be unset.
     * @returns
     */
    setOptionCurrent(option: HTMLElement, current?: boolean): void;
    /**
     * For each option, this function is called to determine if the option should be displayed based on the input string
     * @param option
     * @param value The current input string
     * @returns Whether this option should be displayed
     */
    filterCallback(option: HTMLElement, value: string): boolean;
    connectedCallback(): void;
    runFirstUpdated(): void;
    private addOpenListeners;
    private removeOpenListeners;
    private handleFocus;
    private handleBlur;
    private handleInput;
    private handleDocumentFocusIn;
    private handleDocumentKeyDown;
    private handleDocumentMouseDown;
    private handleComboboxMouseDown;
    private handleComboboxKeyDown;
    private handleClearClick;
    private handleClearMouseDown;
    private handleOptionClick;
    /**
     * Runs when the default slot changes, i.e when options are removed/added to listbox.
     * Update the selected options (this.value) accordingly.
     */
    handleDefaultSlotChange(): void;
    private handleTagRemove;
    /**
     * Gets an array of all <cx-option> elements
     */
    private getAllOptions;
    /**
     * Gets the first <cx-option> element
     */
    private getFirstOption;
    /**
     * Gets an array of all visible <cx-option> elements
     */
    private getVisibleOptions;
    /**
     * Resolves selected options for the current value and applies fallback selection
     * when unmatched values exist and `fallbackOptionValue` is configured.
     */
    private getOptionsForValue;
    /**
     * Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one
     * option may be "current" at a time.
     */
    setCurrentOption(option: HTMLElement | null): void;
    /**
     * Sets the selected option(s)
     */
    private setSelectedOptions;
    /**
     * Toggles an option's selected state
     */
    private toggleOptionSelection;
    /**
     * This method must be called whenever the selection changes. It will update the selected options cache, the current
     * value, and the display value
     */
    private selectionChanged;
    protected get tags(): (TemplateResult<1> | typeof nothing)[];
    private handleInvalid;
    handleDisabledChange(): void;
    handleValueChange(): void;
    handleNoDropdownChange(): Promise<void>;
    handleOpenChange(): Promise<void>;
    private selectOptionByInput;
    private filterOptionsByInput;
    /** Shows the listbox. */
    show(): Promise<void>;
    /** Hides the listbox. */
    hide(): Promise<void>;
    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
    checkValidity(): boolean;
    /** Gets the associated form, if one exists. */
    getForm(): HTMLFormElement | null;
    /** Checks for validity and shows the browser's validation message if the control is invalid. */
    reportValidity(): boolean;
    /** Sets a custom validation message. Pass an empty string to restore validity. */
    setCustomValidity(message: string): void;
    /** Sets focus on the control. */
    focus(options?: FocusOptions): void;
    /** Removes focus from the control. */
    blur(): void;
    render(): TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-select': CxSelect;
    }
}
