import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2021-2026 GoodData Corporation
import { useEffect, useState } from "react";
import { useHubspotForm } from "@aaronhayes/react-use-hubspot-form";
import { useIntl } from "react-intl";
import { LoadingComponent } from "@gooddata/sdk-ui";
import { Button } from "../Button/Button.js";
import { Typography } from "../Typography/Typography.js";
/**
 * @internal
 */
export function HubspotConversionTouchPointDialogBase({ targetId, hubspotPortalId, hubspotFormId, selectedValue, cancelButtonText, dialogTitle, showCancelButton, submitButtonClass, accessibilityConfig, values = {}, onClose, onFormSubmitted, }) {
    const intl = useIntl();
    const [isFormReady, setIsFormReady] = useState(false);
    const hubspotFormTargetId = targetId || "conversion-touch-point-hubspot";
    useEffect(() => {
        // the Hubspot form requires jQuery object, we need to create a fake jQuery object to bypass this.
        window.jQuery =
            window.jQuery ||
                function (nodeOrSelector) {
                    if (typeof nodeOrSelector == "string") {
                        return document.querySelector(nodeOrSelector);
                    }
                    return nodeOrSelector;
                };
        if (window.hbspt?.isSuccessMessageShow) {
            window.hbspt.isSuccessMessageShow = false;
        }
    }, []);
    const onHubspotFormSubmitted = () => {
        if (!window.hbspt?.isSuccessMessageShow) {
            onFormSubmitted?.();
            onClose();
            if (window.hbspt) {
                window.hbspt.isSuccessMessageShow = true;
            }
        }
    };
    const { formCreated } = useHubspotForm({
        portalId: hubspotPortalId,
        formId: hubspotFormId,
        target: `#${hubspotFormTargetId}`,
        locale: intl.locale.split("-").shift(),
        submitButtonClass,
        onFormSubmitted: onHubspotFormSubmitted,
        onFormReady: ($form) => {
            setIsFormReady(true);
            let fields = $form;
            if (fields["jquery"] && fields[0]?.length > 0) {
                fields = fields[0];
            }
            // populating the values for hidden fields
            for (let i = 0; i < fields.length; i += 1) {
                const inputField = fields[i];
                if (!inputField) {
                    continue;
                }
                const populatedValue = values[inputField.name];
                if (populatedValue) {
                    inputField.value = populatedValue;
                }
                if (selectedValue && inputField.value.indexOf(selectedValue) !== -1) {
                    // Call click event to check the radio button on Hubspot form
                    inputField.click();
                }
            }
        },
    });
    return (_jsxs(_Fragment, { children: [accessibilityConfig ? (_jsx("h2", { className: "sr-only", id: accessibilityConfig.titleElementId, children: dialogTitle })) : null, formCreated ? null : _jsx(LoadingComponent, {}), formCreated ? (_jsxs("div", { className: "conversion-touch-point-dialog-wrapper", children: [isFormReady && dialogTitle ? _jsx(Typography, { tagName: "h3", children: dialogTitle }) : null, _jsx("div", { id: hubspotFormTargetId, className: "hubspot-form" }), isFormReady && showCancelButton ? (_jsx(Button, { className: "gd-button-secondary", onClick: onClose, value: cancelButtonText })) : null] })) : null] }));
}
