import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useId, useMemo } from "react";
import { Input } from "../../../ui/components/index.js";
import { sharedValueTransformers } from "../../lib/shared-value-transformers.js";
import { cn } from "../../lib/utils.js";
import { FormDescription, FormGroup, FormLabel, FormMessageList, } from "../fragments/index.js";
import ValueTransformer from "../fragments/value-transformer/index.js";
import UrlFavicon from "./url-favicon.js";
import { useURLWarnings } from "./useURLWarnings.js";
const UrlInput = React.forwardRef(({ label, description, showWarnings = true, warnings: warningsProp, errors, platformIcons, value, onBlur, ...props }, ref) => {
    const idGenerated = useId();
    const id = props.id ?? idGenerated;
    const hasError = !!errors?.length;
    const { warnings, checkForWarnings } = useURLWarnings(value ?? "");
    const showIcon = Object.keys(platformIcons ?? {}).length > 0;
    const combinedWarnings = useMemo(() => {
        return [...(warningsProp ?? []), ...warnings];
    }, [warningsProp, warnings]);
    const handleBlur = useCallback((event) => {
        checkForWarnings();
        onBlur?.(event);
    }, [checkForWarnings, onBlur]);
    const handleWarningsOnEnter = useCallback((event) => {
        if (event.key === "Enter") {
            checkForWarnings();
        }
    }, [checkForWarnings]);
    // prevent url from having trailing spaces
    const transformers = useMemo(() => [sharedValueTransformers.trimOnBlur()], []);
    return (_jsxs(FormGroup, { children: [_jsx(FormLabel, { htmlFor: id, required: props.required, disabled: props.disabled, hasError: !!errors?.length, children: label }), _jsxs("div", { className: "relative", children: [_jsx(ValueTransformer, { transformers: transformers, children: _jsx(Input, { id: id, ref: ref, type: "url", ...props, value: value ?? "", onBlur: handleBlur, onKeyDown: handleWarningsOnEnter, "aria-invalid": hasError, className: cn(showIcon && "pl-8"), "data-cast": "URLTrim" }) }), _jsx(UrlFavicon, { url: value ?? "", platformIcons: platformIcons })] }), description && _jsx(FormDescription, { children: description }), showWarnings && combinedWarnings.length > 0 && (_jsx(FormMessageList, { messages: combinedWarnings, type: "warning" })), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
});
UrlInput.displayName = "UrlInput";
export { UrlInput };
//# sourceMappingURL=url-input.js.map