import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useId, useState } from 'react';
import { FormDescription, FormGroup, FormLabel, FormMessageList, } from '../../../../scalars/components/fragments/index.js';
import { cn } from '../../../../scalars/lib/utils.js';
import { CurrencyCodePicker } from '../currency-code-picker/index.js';
import { useAmountInput } from './use-amount-input.js';
import { NumberInput } from '../number-input/index.js';
const AmountInputController = 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', 'rounded-md border border-gray-300', 'h-[36px]', 
                // focus state
                'focus:rounded-md focus:border-gray-900 transition-colors focus-within:ring-1 focus-within:rounded focus-within:ring-offset-0'), children: [_jsx("input", { name: name, type: "hidden", "data-cast": isBigInt ? 'AmountBigInt' : 'AmountNumber' }), isShowSelect && currencyPosition === 'left' && (_jsx(CurrencyCodePicker, { contentAlign: "start", contentClassName: "[&]:!w-[120px]", disabled: disabled, currencies: options, onChange: handleOnChangeSelect, placeholder: placeholderSelect, includeCurrencySymbols: includeCurrencySymbols, symbolPosition: symbolPosition, searchable: false, className: cn('focus:border-r-none focus:z-10 focus:ring-0 focus:ring-offset-0 focus:bg-none', 'outline-none focus-visible:ring-0 focus-visible:ring-offset-0', 'h-[32px]', 'hover:bg-transparent', 'border-none', selectProps?.className), ...(selectProps ?? { name: '' }) })), isShowSelect && currencyPosition === 'left' && (_jsx("div", { className: "border-l-[1px] border-gray-300 h-full flex items-center" })), _jsxs("div", { className: cn('relative flex items-center'), children: [_jsx(NumberInput, { 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-l-[0.5px]', currencyPosition === 'right' && 'rounded-r-none border-r-[0.5px]', isPercent && 'rounded-md pr-7', isAmountWithoutUnit && 'rounded-md', 'outline-none focus-visible:ring-0 focus-visible:ring-offset-0', 'border-none', 'h-[32px]', 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("div", { className: "border-l-[1px] border-gray-300 h-full flex items-center" })), isShowSelect && currencyPosition === 'right' && (_jsx(CurrencyCodePicker, { contentAlign: "end", contentClassName: "[&]:!w-[120px]", className: cn('focus:border-l-none focus:z-10 focus:ring-0 focus:ring-offset-0 focus:bg-none', 'outline-none focus-visible:ring-0 focus-visible:ring-offset-0', 'h-[32px]', 'hover:bg-transparent', 'border-none', selectProps?.className), disabled: disabled, includeCurrencySymbols: includeCurrencySymbols, currencies: options, value: valueSelect, onChange: handleOnChangeSelect, name: "", placeholder: placeholderSelect, symbolPosition: symbolPosition, searchable: false, ...(selectProps ?? { name: '' }) }))] }), description && _jsx(FormDescription, { children: description }), warnings && _jsx(FormMessageList, { messages: warnings, type: "warning" }), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
AmountInputController.displayName = 'AmountInputController';
const AmountInputUncontroller = (props) => {
    const [value, setValue] = useState(props.value ?? props.defaultValue);
    const handleChange = (e) => {
        const newValue = e.target.value;
        setValue(newValue);
    };
    return _jsx(AmountInputController, { ...props, value: value, onChange: handleChange });
};
const AmountInput = (props) => {
    if (props.onChange) {
        return _jsx(AmountInputController, { ...props });
    }
    return _jsx(AmountInputUncontroller, { ...props });
};
AmountInput.displayName = 'AmountInput';
export { AmountInput };
//# sourceMappingURL=amount-input.js.map