import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "@powerhousedao/design-system";
import React, { useCallback, useId } from "react";
import { Button } from "../button/button.js";
import { Command } from "../command/command.js";
import { FormDescription } from "../form-description/form-description.js";
import { FormGroup } from "../form-group/form-group.js";
import { FormLabel } from "../form-label/form-label.js";
import { FormMessageList } from "../form-message/message-list.js";
import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
import { withFieldValidation } from "../with-field-validation/with-field-validation.js";
import { Content } from "./content.js";
import { SelectedContent } from "./selected-content.js";
import { useSelectField } from "./use-select-field.js";
export const SelectFieldRaw = React.forwardRef(({ 
// core functionality props
options = [], favoriteOptions = [], defaultValue, value, onChange, onBlur, 
// form-related props
id: propId, name, label, required, disabled, 
// validation props
errors = [], warnings = [], 
// behavior props
multiple, selectionIcon = "auto", selectionIconPosition = "left", searchable, 
// display props
description, placeholder, className, contentClassName, contentAlign = "start", ...props }, ref) => {
    const prefix = useId();
    const id = propId ?? `${prefix}-select`;
    const { selectedValues, isPopoverOpen, commandListRef, toggleOption, handleClear, toggleAll, handleOpenChange, } = useSelectField({
        options,
        multiple,
        defaultValue,
        value,
        onChange,
    });
    const onTriggerBlur = useCallback((e) => {
        if (!isPopoverOpen) {
            // trigger the blur event when the trigger loses focus but the popover is not open,
            // because when the popover is open, the trigger loses focus but the select as a component still has the focus
            onBlur?.(e);
        }
    }, [onBlur, isPopoverOpen]);
    return (_jsxs(FormGroup, { children: [label && (_jsx(FormLabel, { htmlFor: id, required: required, disabled: disabled, hasError: errors.length > 0, inline: false, onClick: (e) => {
                    e.preventDefault();
                    e.target.control?.focus();
                }, children: label })), _jsxs(Popover, { open: isPopoverOpen, onOpenChange: (open) => {
                    handleOpenChange(open);
                    // if the popover is closing and it was not by the trigger button
                    if (!open && document.activeElement?.id !== id) {
                        onBlur?.({ target: {} });
                    }
                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { id: id, name: name, type: "button", role: "combobox", onBlur: onTriggerBlur, disabled: disabled, "aria-invalid": errors.length > 0, "aria-label": label ? undefined : multiple ? "Multi select" : "Select", "aria-required": required, "aria-expanded": isPopoverOpen, className: cn("flex h-9 w-full items-center justify-between px-3 py-2", "dark:border-charcoal-700 dark:bg-charcoal-900 rounded-md border border-gray-300 bg-white", "hover:border-gray-300 hover:bg-gray-100", "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-800", "dark:focus:ring-charcoal-300 focus:outline-none focus:ring-1 focus:ring-gray-900 focus:ring-offset-0", "dark:focus-visible:ring-charcoal-300 focus-visible:ring-1 focus-visible:ring-gray-900 focus-visible:ring-offset-0", disabled && [
                                "!pointer-events-auto cursor-not-allowed bg-gray-50",
                                "dark:hover:border-charcoal-700 dark:hover:bg-charcoal-900 hover:border-gray-300 hover:bg-gray-50",
                            ], className), ...props, ref: ref, children: _jsx(SelectedContent, { selectedValues: selectedValues, options: [...favoriteOptions, ...options], multiple: multiple, searchable: searchable, placeholder: placeholder, handleClear: handleClear }) }) }), _jsx(PopoverContent, { align: contentAlign, onEscapeKeyDown: (e) => {
                            e.preventDefault();
                            handleOpenChange(false);
                        }, className: contentClassName, children: _jsx(Command, { defaultValue: !multiple && selectedValues[0]
                                ? options.find((opt) => opt.value === selectedValues[0])
                                    ?.label
                                : undefined, children: _jsx(Content, { favoriteOptions: favoriteOptions, searchable: searchable, commandListRef: commandListRef, multiple: multiple, selectedValues: selectedValues, selectionIcon: selectionIcon, selectionIconPosition: selectionIconPosition, options: options, toggleAll: toggleAll, toggleOption: toggleOption }) }) })] }), description && _jsx(FormDescription, { children: description }), warnings.length > 0 && (_jsx(FormMessageList, { messages: warnings, type: "warning" })), errors.length > 0 && (_jsx(FormMessageList, { messages: errors, type: "error" }))] }));
});
export const SelectField = withFieldValidation(SelectFieldRaw);
SelectField.displayName = "SelectField";
//# sourceMappingURL=select-field.js.map