"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExternalChartingWizard = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const AdaptableContext_1 = require("../../../AdaptableContext");
const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
const SettingsSection_1 = require("./SettingsSection");
const Flex_1 = require("../../../../components/Flex");
const PreviewChartSection = ({ chartDefinition }) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const divRef = React.useRef(null);
    React.useEffect(() => {
        if (!divRef.current) {
            return;
        }
        const container = {
            name: 'Preview Chart',
            element: divRef.current,
        };
        const transientChartDefinition = adaptable.api.chartingApi.internalApi.onPreviewExternalChart(chartDefinition, container);
        return () => {
            adaptable.api.chartingApi.internalApi.onHideExternalChart(transientChartDefinition);
        };
    }, [divRef]);
    return React.createElement("div", { ref: divRef });
};
const ExternalChartingWizard = (props) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const onPreviewChart = adaptable.api.optionsApi.getChartingOptions().externalChartingOptions?.onPreviewChart;
    const [chartDefinition, setChartDefinition] = React.useState(() => {
        return props.data ?? props.popupParams?.value;
    });
    const handleFinish = () => {
        adaptable.api.chartingApi.editExternalChartDefinition(chartDefinition);
        props.onFinishWizard(props.data);
    };
    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: chartDefinition, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
            {
                title: 'Settings',
                details: 'Chart Settings',
                isValid: SettingsSection_1.isSettingsValid,
                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                    React.createElement(SettingsSection_1.SettingsSection, { chartDefinition: chartDefinition, onChange: setChartDefinition }))),
            },
            onPreviewChart
                ? {
                    title: 'Preview Chart',
                    render: () => {
                        return (React.createElement(Flex_1.Box, { className: "twa:p-2" },
                            React.createElement(PreviewChartSection, { chartDefinition: chartDefinition })));
                    },
                }
                : null,
        ].filter(Boolean) }));
};
exports.ExternalChartingWizard = ExternalChartingWizard;
