"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PreviewChartSection = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const isEqual_1 = tslib_1.__importDefault(require("../../../../Utilities/utils/isEqual"));
const InternalRedux = tslib_1.__importStar(require("../../../../Redux/ActionsReducers/InternalRedux"));
const AdaptableContext_1 = require("../../../AdaptableContext");
const PreviewChartSection = (props) => {
    const currentChartModels = (0, react_redux_1.useSelector)((state) => InternalRedux.ChartingCurrentChartModelsSelector(state.Internal));
    const [localChartId, setLocalChartId] = React.useState(null);
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const divRef = React.useRef(null);
    React.useEffect(() => {
        if (!divRef.current) {
            return;
        }
        const chartRef = adaptable.api.chartingApi.showChartDefinition(props.chartDefinition, divRef.current);
        setLocalChartId(chartRef.chartId);
        chartRef.chart;
        return () => {
            chartRef.destroyChart();
        };
    }, [divRef]);
    React.useEffect(() => {
        const model = currentChartModels.find((model) => model.chartId == localChartId);
        if (model && !(0, isEqual_1.default)(model, props.chartDefinition.Model)) {
            props.onChange({
                ...props.chartDefinition,
                Model: model,
            });
        }
    }, [currentChartModels]);
    return React.createElement("div", { ref: divRef });
};
exports.PreviewChartSection = PreviewChartSection;
