import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2026 GoodData Corporation
import { memo, useCallback, useState } from "react";
import { useIntl } from "react-intl";
import { InputWithNumberFormat } from "../../../Form/InputWithNumberFormat.js";
import { FormattedPreview } from "../shared/FormattedPreview.js";
import { ExtendedPreview } from "./ExtendedPreview.js";
const DEFAULT_PREVIEW_VALUE = -1234.5678;
export const Preview = memo(function Preview(props) {
    const [preview, setPreview] = useState(DEFAULT_PREVIEW_VALUE);
    const intl = useIntl();
    const { format, separators } = props;
    const onPreviewChange = useCallback((value) => {
        setPreview(value ?? 0);
    }, []);
    return (_jsxs("div", { className: "gd-measure-custom-format-dialog-section gd-measure-custom-format-dialog-section-preview", children: [
            _jsx("span", { className: "gd-measure-custom-format-dialog-section-title", children: intl.formatMessage({ id: "measureNumberCustomFormatDialog.preview" }) }), _jsxs("div", { className: "gd-measure-custom-format-dialog-preview", children: [
                    _jsx(InputWithNumberFormat, { className: "s-custom-format-dialog-preview-input gd-measure-custom-format-dialog-preview-input", value: preview, isSmall: true, autofocus: false, onChange: onPreviewChange, separators: separators }), _jsx(FormattedPreview, { previewNumber: preview, format: format, separators: separators, className: "s-custom-format-dialog-preview-formatted gd-measure-custom-format-dialog-preview-string" })
                ] }), _jsx(ExtendedPreview, { format: format, separators: separators })
        ] }));
});
