import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
import UrlFavicon from './url-favicon.js';
import { useURLWarnings } from './useURLWarnings.js';
import { FormDescription } from '../../../../scalars/components/fragments/form-description/index.js';
import { FormGroup } from '../../../../scalars/components/fragments/form-group/index.js';
import { FormLabel } from '../../../../scalars/components/fragments/form-label/index.js';
import { FormMessageList } from '../../../../scalars/components/fragments/form-message/index.js';
import { sharedValueTransformers } from '../../../../scalars/lib/shared-value-transformers.js';
import ValueTransformer from '../../../../scalars/components/fragments/value-transformer/index.js';
import { Input } from '../input/index.js';
import { UrlInputDiff } from './url-input-diff.js';
import { cn } from '../../../../scalars/lib/utils.js';
const UrlInput = React.forwardRef(({ label, description, required, disabled, showWarnings = true, warnings: warningsProp, errors, platformIcons, value, defaultValue, className, onBlur, onChange, onKeyDown, 
// diff props
viewMode = 'edition', baseValue, ...props }, ref) => {
    const idGenerated = useId();
    const id = props.id ?? idGenerated;
    const hasError = !!errors?.length;
    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? '');
    const { warnings, checkForWarnings } = useURLWarnings(internalValue);
    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 handleChange = useCallback((event) => {
        setInternalValue(event.target.value);
        onChange?.(event);
    }, [onChange]);
    const handleWarningsOnEnter = useCallback((event) => {
        if (event.key === 'Enter') {
            checkForWarnings();
        }
        onKeyDown?.(event);
    }, [checkForWarnings, onKeyDown]);
    // prevent url from having trailing spaces
    const transformers = useMemo(() => [sharedValueTransformers.trimOnBlur()], []);
    useEffect(() => {
        if (value !== undefined) {
            setInternalValue(value);
        }
    }, [value]);
    if (viewMode === 'edition') {
        return (_jsxs(FormGroup, { children: [_jsx(FormLabel, { htmlFor: id, required: required, disabled: disabled, hasError: !!errors?.length, children: label }), _jsxs("div", { className: "relative", children: [_jsx(ValueTransformer, { transformers: transformers, children: _jsx(Input, { disabled: disabled, id: id, ref: ref, type: "url", required: required, value: internalValue, onChange: handleChange, "aria-invalid": hasError, className: cn(showIcon && 'pl-8', className), "data-cast": "URLTrim", onBlur: handleBlur, onKeyDown: handleWarningsOnEnter, ...props }) }), _jsx(UrlFavicon, { url: internalValue, platformIcons: platformIcons, className: "absolute left-2.5 top-0" })] }), description && _jsx(FormDescription, { children: description }), showWarnings && combinedWarnings.length > 0 && (_jsx(FormMessageList, { messages: combinedWarnings, type: "warning" })), errors && _jsx(FormMessageList, { messages: errors, type: "error" })] }));
    }
    return (_jsx(UrlInputDiff, { value: internalValue, label: label, required: required, viewMode: viewMode, baseValue: baseValue, platformIcons: platformIcons, "data-testid": "url-input-diff" }));
});
UrlInput.displayName = 'UrlInput';
export { UrlInput };
//# sourceMappingURL=url-input.js.map