import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Button, Dialog, DialogTrigger, Divider, Header, Radio, Skeleton, Space, Title, } from '@cube-dev/ui-kit';
import { AreaChartOutlined, BarChartOutlined, CodeOutlined, LineChartOutlined, LoadingOutlined, TableOutlined, } from '@ant-design/icons';
import { useLocalStorage } from './hooks';
import { useQueryBuilderContext } from './context';
import { PivotAxes, PivotOptions } from './Pivot';
import { ChevronIcon } from './icons/ChevronIcon';
import { AccordionCard } from './components/AccordionCard';
import { OutdatedLabel } from './components/OutdatedLabel';
import { QueryBuilderChartResults } from './QueryBuilderChartResults';
const CHART_HEIGHT = 400;
const MAX_SERIES_LIMIT = 25;
const ALLOWED_CHART_TYPES = ['table', 'line', 'bar', 'area'];
export function QueryBuilderChart(props) {
    const [isVizardLoaded, setIsVizardLoaded] = useState(false);
    const [isExpanded, setIsExpanded] = useLocalStorage('QueryBuilder:Chart:expanded', false);
    const { maxHeight = CHART_HEIGHT, onToggle } = props;
    let { query, isLoading, chartType, setChartType, pivotConfig, updatePivotConfig, resultSet, apiToken, apiUrl, isResultOutdated, VizardComponent, } = useQueryBuilderContext();
    const containerRef = useRef(null);
    if (!ALLOWED_CHART_TYPES.includes(chartType || '')) {
        chartType = 'line';
    }
    useEffect(() => {
        const element = containerRef.current;
        if (!element) {
            return;
        }
        const onScroll = () => {
            if (chartType !== 'table') {
                element.scrollTop = 0;
                setTimeout(() => {
                    element.scrollTop = 0;
                });
            }
        };
        element.addEventListener('scroll', onScroll);
        return () => {
            element.removeEventListener('scroll', onScroll);
        };
    }, [containerRef.current]);
    const chart = useMemo(() => (_jsx(QueryBuilderChartResults, { resultSet: resultSet, isLoading: isLoading, query: query, pivotConfig: pivotConfig, chartType: chartType, isExpanded: isExpanded, containerRef: containerRef })), [resultSet, chartType, isLoading, pivotConfig, isExpanded]);
    const onMove = useCallback((arg) => {
        return updatePivotConfig.moveItem(arg);
    }, [updatePivotConfig]);
    const onUpdate = useCallback((arg) => {
        return updatePivotConfig.update(arg);
    }, [updatePivotConfig]);
    const pivotConfigurator = useMemo(() => {
        return pivotConfig ? (_jsxs(DialogTrigger, { type: "popover", children: [_jsx(Button, { size: "small", rightIcon: _jsx(ChevronIcon, { direction: "bottom" }), children: "Pivot" }), _jsxs(Dialog, { border: true, overflow: "hidden", width: "40x max-content 80x", children: [_jsx(PivotAxes, { pivotConfig: pivotConfig, onMove: onMove }), _jsx(Divider, {}), _jsx("div", { style: { padding: '8px' }, children: _jsx(PivotOptions, { pivotConfig: pivotConfig, onUpdate: onUpdate }) })] })] })) : undefined;
    }, [pivotConfig, onMove, onUpdate]);
    return (_jsx(AccordionCard, { qa: "QueryBuilderChart", isExpanded: isExpanded, title: "Chart", subtitle: isLoading ? (isExpanded ? (_jsx(LoadingOutlined, {})) : undefined) : isResultOutdated ? (_jsx(OutdatedLabel, {})) : undefined, extra: isExpanded ? (_jsxs(Space, { children: [_jsxs(Radio.ButtonGroup, { qa: "ChartType", "aria-label": "Type", labelPosition: "side", value: chartType, onChange: async (val) => {
                        setChartType(val);
                    }, children: [_jsx(Radio.Button, { qa: "LineChartType", value: "line", children: _jsxs(Space, { gap: ".5x", children: [_jsx(LineChartOutlined, { style: { fontSize: 'var(--icon-size)' } }), _jsx("span", { children: "Line" })] }) }), _jsx(Radio.Button, { qa: "BarChartType", value: "bar", children: _jsxs(Space, { gap: ".5x", children: [_jsx(BarChartOutlined, { style: { fontSize: 'var(--icon-size)' } }), _jsx("span", { children: "Bar" })] }) }), _jsx(Radio.Button, { qa: "AreaChartType", value: "area", children: _jsxs(Space, { gap: ".5x", children: [_jsx(AreaChartOutlined, { style: { fontSize: 'var(--icon-size)' } }), _jsx("span", { children: "Area" })] }) }), _jsx(Radio.Button, { qa: "TableChartType", value: "table", children: _jsxs(Space, { gap: ".5x", children: [_jsx(TableOutlined, { style: { fontSize: 'var(--icon-size)' } }), _jsx("span", { children: "Table" })] }) })] }), pivotConfigurator, VizardComponent ? (_jsxs(DialogTrigger, { isDismissable: true, type: "fullscreen", children: [_jsx(Button, { type: "primary", size: "small", icon: _jsx(CodeOutlined, {}), onPress: () => setIsVizardLoaded(true), children: "Code" }), _jsxs(Dialog, { isDismissable: true, children: [_jsx(Header, { children: _jsx(Title, { children: "Chart Prototyping" }) }), isVizardLoaded ? (_jsx(VizardComponent, { apiToken: apiToken, apiUrl: apiUrl, query: query, pivotConfig: pivotConfig })) : null] })] })) : null] })) : (_jsx("div", { style: { height: '32px' } })), onToggle: (open) => {
            setIsExpanded(open);
            onToggle?.(open);
        }, children: _jsxs(_Fragment, { children: [isLoading ? _jsx(Skeleton, { height: 400, layout: "chart", padding: "0 1x 1x 1x" }) : undefined, chart] }) }));
}
//# sourceMappingURL=QueryBuilderChart.js.map