"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useChartingElements = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_redux_1 = require("react-redux");
const Select_1 = require("../../components/Select");
const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
const ChartingState_1 = require("../../AdaptableState/ChartingState");
const ChartingRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/ChartingRedux"));
const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
const AdaptableContext_1 = require("../AdaptableContext");
const DeleteChartButton_1 = require("./DeleteChartButton");
const EditChartButton_1 = require("./EditChartButton");
const useAgChartState_1 = require("./useAgChartState");
const useExternalChartState_1 = require("./useExternalChartState");
const useChartingElements = ({ elementType, accessLevel, size = 'normal', }) => {
    const adaptable = (0, AdaptableContext_1.useAdaptable)();
    const chartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetChartModels);
    const extenralChartDefinitions = (0, react_redux_1.useSelector)(ChartingRedux.ChartingGetExternalChartDefinitions);
    const allChartDefinitions = [...chartDefinitions, ...extenralChartDefinitions];
    const chartingOptions = adaptable.adaptableOptions?.chartingOptions;
    const chartContainers = chartingOptions?.chartContainers;
    const [selectedChartId, setSelectedChartId] = React.useState(() => {
        // ID is kept in state becaus that does not change, the definition might change
        return allChartDefinitions.length > 0 ? allChartDefinitions[0].Uuid : null;
    });
    const selectedChart = allChartDefinitions.find((chart) => chart.Uuid === selectedChartId);
    const isAgChart = (0, ChartingState_1.isAgChartDefinition)(selectedChart);
    const chartAccessLevel = AdaptableHelper_1.default.getAccessLevelForObject(selectedChart, accessLevel);
    const [selectedContainer, setSelectedContainer] = React.useState(null);
    // Need to always call as they the rule for hooks
    const { isOpen: isAgChartOpen, showChart: showAgChart, closeChart: hideAgChart, } = (0, useAgChartState_1.useAgChartState)(isAgChart ? selectedChart : undefined);
    // Need to always call as they the rule for hooks
    const { isOpen: isExternalChartOpened, showChart: showExternalChart, hideChart: hideExternalChart, } = (0, useExternalChartState_1.useExternalChartState)(!isAgChart ? selectedChart : undefined);
    const isOpen = isAgChart ? isAgChartOpen : isExternalChartOpened;
    const showChart = isAgChart ? showAgChart : showExternalChart;
    const hideChart = isAgChart ? hideAgChart : hideExternalChart;
    const options = allChartDefinitions.map((chartDefinition) => ({
        label: chartDefinition.Name,
        value: chartDefinition.Uuid,
        onClick: () => {
            setSelectedChartId(chartDefinition.Uuid);
        },
    }));
    const hasCharts = options.length > 0;
    const isSelectedChart = hasCharts && selectedChart != null;
    let selectedChartValue = '';
    if (hasCharts && selectedChart) {
        selectedChartValue = selectedChart.Name;
    }
    else if (hasCharts) {
        selectedChartValue = 'Select Chart';
    }
    else {
        selectedChartValue = 'No Charts';
    }
    React.useEffect(() => {
        // select first
        if (!selectedChart && chartDefinitions.length > 0) {
            setSelectedChartId(chartDefinitions[0].Uuid);
        }
    }, [chartDefinitions]);
    let containerOptions = chartContainers
        ? chartContainers?.map((contianerDef) => ({
            label: contianerDef.name,
            value: contianerDef.name,
        }))
        : [];
    if ((0, ChartingState_1.isAgChartDefinition)(selectedChart)) {
        containerOptions.unshift({
            label: chartingOptions.agGridContainerName,
            value: chartingOptions.agGridContainerName,
        });
    }
    const style = {};
    let iconSize;
    if (size === 'small') {
        style.padding = 2;
        style.fontSize = 'small';
        iconSize = 15;
    }
    const chartSelector = (React.createElement(Select_1.Select, { className: `ab-${elementType}__Chart__select`, size: size, value: selectedChartId, options: options, placeholder: 'Select Chart', disabled: !hasCharts, onChange: (chartUuid) => setSelectedChartId(chartUuid) }));
    const containerSelector = Boolean(chartContainers?.length) && (React.createElement(Select_1.Select, { value: selectedContainer === null ? chartingOptions.agGridContainerName : selectedContainer?.name, size: size, onChange: (containerName) => {
            if (containerName === chartingOptions.agGridContainerName) {
                setSelectedContainer(null);
            }
            else {
                setSelectedContainer(chartContainers.find((containerOption) => containerOption.name === containerName));
            }
        }, options: containerOptions, placeholder: "Select Container" }));
    const chartButton = (React.createElement(SimpleButton_1.default, { style: style, mr: 1, onClick: () => (isOpen ? hideChart() : showChart(selectedContainer)), disabled: !Boolean(selectedChart), variant: 'text', tone: 'neutral', icon: isOpen ? 'visibility-off' : 'visibility-on', tooltip: isOpen ? 'Hide Chart' : 'Show Chart' }));
    const deleteButton = (React.createElement(DeleteChartButton_1.DeleteChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel }));
    const editButton = (React.createElement(EditChartButton_1.EditChartButton, { iconSize: iconSize, chart: selectedChart, accessLevel: chartAccessLevel, isOpen: isOpen }));
    return {
        chartSelector,
        containerSelector,
        chartButton,
        deleteButton,
        editButton,
        selectedChart,
    };
};
exports.useChartingElements = useChartingElements;
