import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn, FormDescription, FormGroup, FormLabel, FormMessageList, NumberFieldRaw, } from "#scalars";
import { forwardRef, useId } from "react";
import { CurrencyCodeFieldRaw } from "../../../../scalars/components/currency-code-field/currency-code-field.js";
import { useAmountInput } from "./use-amount-input.js";
const AmountInput = forwardRef(({ label, value, id: propId, minValue, maxValue, onChange, onBlur, disabled, className, required, errors, warnings, description, defaultValue, type, numberProps, selectProps, step = 1, currencyPosition = "right", name, trailingZeros, viewPrecision, precision, placeholder, placeholderSelect, units, includeCurrencySymbols, symbolPosition, }, ref) => {
    const generatedId = useId();
    const id = propId ?? generatedId;
    const { isShowSelect, isPercent, options, valueSelect, valueInput, handleOnChangeInput, handleOnChangeSelect, handleBlur, isBigInt, handleIsInputFocused, isAmountWithoutUnit, inputFocused, } = useAmountInput({
        value,
        defaultValue,
        type,
        onChange,
        onBlur,
        precision,
        viewPrecision,
        trailingZeros,
        units,
    });
    return (_jsxs(FormGroup, { children: [label && (_jsx(FormLabel, { htmlFor: id, required: required, disabled: disabled, hasError: !!errors?.length, className: cn(disabled && "mb-[3px]"), children: label })), _jsxs("div", { className: cn("relative flex items-center"), children: [_jsx("input", { name: name, type: "hidden", "data-cast": isBigInt ? "AmountBigInt" : "AmountNumber" }), _jsxs("div", { className: cn("relative flex items-center"), children: [isShowSelect && currencyPosition === "left" && (_jsx(CurrencyCodeFieldRaw, { contentAlign: "start", contentClassName: "[&]:!w-[120px] w-full", disabled: disabled, currencies: options ?? [], onChange: handleOnChangeSelect, placeholder: placeholderSelect, includeCurrencySymbols: includeCurrencySymbols, symbolPosition: symbolPosition, searchable: false, className: cn("rounded-l-md rounded-r-none border border-gray-300", "border-r-[0.5px]", 
                                // focus state
                                "focus:border-r-none focus:z-10 focus:ring-1 focus:ring-gray-900 focus:ring-offset-0", "focus:outline-none", selectProps?.className), ...(selectProps ?? { name: "" }) })), _jsx(NumberFieldRaw, { name: "", step: step, required: required, disabled: disabled, value: valueInput === undefined
                                    ? undefined
                                    : valueInput, id: id, maxValue: maxValue, precision: precision, minValue: minValue, onChange: handleOnChangeInput, onFocus: handleIsInputFocused, placeholder: placeholder, className: cn(currencyPosition === "left" &&
                                    "rounded-l-none border border-l-[0.5px] border-gray-300", currencyPosition === "right" &&
                                    "rounded-r-none border border-r-[0.5px] border-gray-300", isPercent && "rounded-md pr-7", 
                                // focus state
                                "focus:border-r-0", isAmountWithoutUnit && "rounded-md", className), onBlur: handleBlur, ref: ref, ...(numberProps || {}) }), isPercent && !inputFocused && (_jsx("span", { className: cn("pointer-events-none absolute inset-y-0 right-2 ml-2 flex items-center", disabled ? "text-gray-400" : "text-gray-900"), children: "%" }))] }), isShowSelect && currencyPosition === "right" && (_jsx(CurrencyCodeFieldRaw, { contentAlign: "end", contentClassName: "[&]:!w-[120px] w-full", disabled: disabled, includeCurrencySymbols: includeCurrencySymbols, currencies: options ?? [], value: valueSelect, onChange: handleOnChangeSelect, name: "", placeholder: placeholderSelect, symbolPosition: symbolPosition, searchable: false, className: cn("rounded-l-none rounded-r-md border border-gray-300", "border-l-[0.5px]", 
                        // focus state
                        "focus:border-l-none focus:z-10 focus:ring-1 focus:ring-gray-900 focus:ring-offset-0", "focus:outline-none", selectProps?.className) }))] }), description && _jsx(FormDescription, { children: description }), warnings && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
AmountInput.displayName = "AmountInput";
export { AmountInput };
//# sourceMappingURL=amount-input.js.map