import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2020-2025 GoodData Corporation
import { memo, useCallback, useState } from "react";
import cx from "classnames";
import { FormattedMessage } from "react-intl";
import { PreviewRows } from "../shared/PreviewRows.js";
export const ExtendedPreview = memo(function ExtendedPreview({ format, separators }) {
    const [expanded, setExpanded] = useState(false);
    const openExtendedPreview = useCallback(() => {
        setExpanded(true);
    }, []);
    return (_jsxs("div", { className: "gd-measure-format-extended-preview s-custom-format-dialog-extended-preview", children: [
            _jsxs("div", { className: cx("s-custom-format-dialog-extended-preview-button gd-measure-format-button", {
                    hidden: expanded,
                }), onClick: openExtendedPreview, children: [
                    _jsx("div", { className: "gd-icon-navigateright gd-measure-format-button-icon-left" }), _jsx("span", { children: _jsx(FormattedMessage, { id: "measureNumberCustomFormatDialog.extendedPreview.button" }) })
                ] }), expanded ? _jsx(PreviewRows, { format: format, separators: separators }) : null] }));
});
