"use client";
import { useCallback, useState } from "react";
import { useResizeObserver } from "../useResizeObserver.js";
import { getFormConfig } from "./formConfig.js";
/**
 * @since 6.0.0
 * @internal
 */ function useAddonPadding(options) {
    const { ref, addon, theme, extra } = options;
    const [padding, setPadding] = useState();
    const addonRef = useResizeObserver({
        ref,
        onUpdate: useCallback((entry)=>{
            const inlineSize = entry.borderBoxSize[0]?.inlineSize;
            if (typeof inlineSize !== "number") {
                return;
            }
            // the leading space for the extra calc is required
            setPadding(`calc(var(--rmd-text-field-${theme}d-padding) + ${inlineSize}px${extra ? ` ${extra}` : ""})`);
        }, [
            extra,
            theme
        ]),
        disabled: !addon,
        disableHeight: true
    });
    return [
        padding,
        addonRef
    ];
}
/**
 * This hook can be used to automatically update the padding on the
 * `TextFieldContainer` based on the size of the `leftAddon` and `rightAddon`.
 *
 * @example Simple Example
 * ```tsx
 * const { style, leftAddonRef, rightAddonRef } = useTextFieldContainerAddons({
 *   leftAddon: true,
 *   rightAddon: true,
 * });
 *
 * return (
 *   <TextField
 *     style={style}
 *     leftAddon={<SomeDynamicAddon />}
 *     leftAddonProps={{ ref: leftAddonRef }}
 *     rightAddon={<SomeDynamicAddon />}
 *     rightAddonProps={{ ref: rightAddonRef }}
 *   />
 * );
 * ```
 *
 * @since 6.0.0
 */ export function useTextFieldContainerAddons(options) {
    const { style: propStyle, theme: propTheme, leftAddon, rightAddon, leftAddonRef: propLeftAddonRef, rightAddonRef: propRightAddonRef, leftAddonExtraCalc = "", rightAddonExtraCalc = "" } = options;
    const theme = getFormConfig("theme", propTheme);
    const [paddingLeft, leftAddonRef] = useAddonPadding({
        ref: propLeftAddonRef,
        theme,
        addon: leftAddon,
        extra: `+ var(--rmd-addon-spacing)${leftAddonExtraCalc ? ` ${leftAddonExtraCalc}` : ""}`
    });
    const [paddingRight, rightAddonRef] = useAddonPadding({
        ref: propRightAddonRef,
        theme,
        addon: rightAddon,
        extra: rightAddonExtraCalc
    });
    let style = propStyle;
    if (typeof paddingLeft === "string" || typeof paddingRight === "string") {
        style = {
            ...propStyle,
            "--rmd-text-field-padding-left": paddingLeft ?? propStyle?.["--rmd-text-field-padding-left"],
            "--rmd-text-field-padding-right": paddingRight ?? propStyle?.["--rmd-text-field-padding-right"]
        };
    }
    return {
        style,
        leftAddonRef,
        rightAddonRef
    };
}

//# sourceMappingURL=useTextFieldContainerAddons.js.map