import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2025-2026 GoodData Corporation
import { forwardRef, useCallback } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
import { createInvalidDatapoint, createInvalidNode, useValidationContextValue } from "@gooddata/sdk-ui";
import { Bubble, BubbleHoverTrigger, Button, IconError, useIdPrefixed } from "@gooddata/sdk-ui-kit";
const TITLE_MAX_LENGTH = 255;
export const AlertingDialogHeader = forwardRef((props, ref) => {
    const { title, onChange, onCancel, placeholder, isSecondaryTitleVisible, secondaryTitle, secondaryTitleIcon, } = props;
    const { formatMessage } = useIntl();
    const validationContextValue = useValidationContextValue(createInvalidNode({ id: "AlertingDialogHeader" }));
    const { isValid, getInvalidDatapoints, setInvalidDatapoints } = validationContextValue;
    const invalidDatapoint = getInvalidDatapoints()[0];
    const errorId = useIdPrefixed("error");
    const setHasError = useCallback((hasError) => {
        if (!hasError) {
            setInvalidDatapoints(() => []);
            return;
        }
        setInvalidDatapoints(() => [
            createInvalidDatapoint({
                id: errorId,
                message: formatMessage({ id: "dialogs.alert.error.too_long" }, { value: TITLE_MAX_LENGTH }),
            }),
        ]);
    }, [errorId, formatMessage, setInvalidDatapoints]);
    const isValueValid = useCallback((value) => {
        return value.length <= TITLE_MAX_LENGTH;
    }, []);
    const dialogHeaderClasses = cx("gd-notifications-channels-dialog-title", "s-gd-notifications-channels-dialog-title", {
        placeholder: title === "",
        "has-error": !isValid,
    });
    const inputHeaderClasses = cx("gd-input-field", {
        "has-error": !isValid,
    });
    const handleOnChange = useCallback((e) => {
        const { value } = e.target;
        const validationResult = isValueValid(value);
        if (!isValid) {
            setHasError(!validationResult);
        }
        onChange(value, validationResult);
    }, [isValueValid, isValid, onChange, setHasError]);
    const handleBlur = useCallback((e) => {
        setHasError(!isValueValid(e.target.value));
    }, [isValueValid, setHasError]);
    return (_jsxs("div", { className: cx("gd-notifications-channels-dialog-header", {
            "gd-notifications-channels-dialog-header--large": isSecondaryTitleVisible,
        }), children: [
            _jsx(Button, { className: "gd-button-primary gd-button-icon-only gd-icon-navigateleft s-alert-dialog-back-button", onClick: onCancel, accessibilityConfig: {
                    ariaLabel: formatMessage({ id: "dialogs.alert.backLabel" }),
                } }), _jsx("div", { className: dialogHeaderClasses, children: _jsxs("div", { className: "gd-input-wrapper", children: [
                        _jsx("input", { ref: ref, type: "text", autoFocus: true, className: inputHeaderClasses, onBlur: handleBlur, value: title, placeholder: placeholder, onChange: handleOnChange, autoComplete: "off", "aria-describedby": isValid ? undefined : errorId, "aria-label": formatMessage({
                                id: "dialogs.alert.accessibility.label.title",
                            }) }), invalidDatapoint ? (_jsxs("span", { id: errorId, className: "gd-notifications-channels-dialog-error-icon", children: [
                                _jsx("div", { className: "sr-only", children: invalidDatapoint.message }), _jsxs(BubbleHoverTrigger, { showDelay: 0, hideDelay: 0, children: [
                                        _jsx(IconError, { width: 18, height: 18 }), _jsx(Bubble, { className: "bubble-negative", arrowOffsets: { "cr cl": [11, -5] }, alignPoints: [{ align: "cr cl" }], children: invalidDatapoint.message })
                                    ] })
                            ] })) : null, isSecondaryTitleVisible ? (_jsxs("div", { className: "gd-notifications-channels-dialog-title-secondary", children: [
                                _jsx("div", { className: "gd-notifications-channels-dialog-title-secondary-icon", children: secondaryTitleIcon }), _jsx("div", { className: "gd-notifications-channels-dialog-title-secondary-text", children: secondaryTitle })
                            ] })) : null] }) })
        ] }));
});
AlertingDialogHeader.displayName = "AlertingDialogHeader";
