import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Copyright (c) 2020-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import { useEffect, useRef, useCallback, useState, forwardRef } from 'react';
import { observer } from 'mobx-react-lite';
import { clsx, BlankPanelPlaceholder, CalculatorIcon, TimesIcon, ControlledDropdownMenu, MenuContent, MenuContentItem, CaretDownIcon, ContextMenu, SigmaIcon, PanelDropZone, DragPreviewLayer, useDragPreviewLayer, PlusIcon, PanelContent, TrashIcon, PanelDnDEntry, CalendarIcon, CalendarClockIcon, CustomSelectorInput, PanelEntryDropZonePlaceholder, FunctionIcon, CogIcon, InfoCircleIcon, BasePopover, InputWithInlineValidation, } from '@finos/legend-art';
import { buildPropertyExpressionFromExplorerTreeNodeData, QUERY_BUILDER_EXPLORER_TREE_DND_TYPE, } from '../../stores/explorer/QueryBuilderExplorerState.js';
import { useDrag, useDrop, useDragLayer, } from 'react-dnd';
import { QueryBuilderDerivationProjectionColumnState, QueryBuilderSimpleProjectionColumnState, QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE, } from '../../stores/fetch-structure/tds/projection/QueryBuilderProjectionColumnState.js';
import { QueryBuilderEditablePropertyName, QueryBuilderPropertyExpressionBadge, } from '../QueryBuilderPropertyExpressionEditor.js';
import { QueryResultModifierModal } from './QueryBuilderResultModifierPanel.js';
import { QUERY_BUILDER_TEST_ID } from '../../__lib__/QueryBuilderTesting.js';
import { flowResult } from 'mobx';
import { useApplicationStore } from '@finos/legend-application';
import { LAMBDA_PIPE, VARIABLE_REFERENCE_TOKEN, AbstractPropertyExpression, PRIMITIVE_TYPE, Property, PropertyExplicitReference, VariableExpression, Multiplicity, PrimitiveType, GenericType, GenericTypeExplicitReference, observe_PrimitiveInstanceValue, PrimitiveInstanceValue, generateFunctionCallStringFromFunctionAnalysisInfo, } from '@finos/legend-graph';
import { QUERY_BUILDER_FUNCTION_DND_TYPE, } from '../../stores/explorer/QueryFunctionsExplorerState.js';
import { DEFAULT_LAMBDA_VARIABLE_NAME } from '../../stores/QueryBuilderConfig.js';
import { InlineLambdaEditor } from '../shared/LambdaEditor.js';
import { QUERY_BUILDER_VARIABLE_DND_TYPE, BasicValueSpecificationEditor, } from '../shared/BasicValueSpecificationEditor.js';
import {} from '../../stores/fetch-structure/tds/aggregation/QueryBuilderAggregateCalendarFunction.js';
import { instanceValue_setValues, propertyExpression_setFunc, } from '../../stores/shared/ValueSpecificationModifierHelper.js';
import { guaranteeNonNullable } from '@finos/legend-shared';
import { getPropertyChainName, getPropertyPath, } from '../../stores/QueryBuilderPropertyEditorState.js';
import { generateDefaultValueForPrimitiveType } from '../../stores/QueryBuilderValueSpecificationHelper.js';
import { QUERY_BUILDER_CALENDAR_TYPE } from '../../graph-manager/QueryBuilderConst.js';
import { QueryBuilderDerivationInfoTooltip, QueryBuilderPropertyInfoTooltip, } from '../shared/QueryBuilderPropertyInfoTooltip.js';
import { getNameOfValueSpecification } from '../shared/QueryBuilderVariableSelector.js';
import { QueryBuilderAggregateOperator_Percentile } from '../../stores/fetch-structure/tds/aggregation/operators/QueryBuilderAggregateOperator_Percentile.js';
import { getFurthestExistsNodeParent, isExistsNodeChild, QUERY_BUILDER_FILTER_DND_TYPE, QueryBuilderFilterTreeConditionNodeData, } from '../../stores/filter/QueryBuilderFilterState.js';
import { cloneAbstractPropertyExpression } from '../../stores/shared/ValueSpecificationEditorHelper.js';
import { buildPropertyExpressionFromExistsNode } from '../filter/QueryBuilderFilterPanel.js';
import { QueryBuilderAggregateOperator_Wavg } from '../../stores/fetch-structure/tds/aggregation/operators/QueryBuilderAggregateOperator_Wavg.js';
import { WavgParamDNDZone } from './QueryBuilderAggParam.js';
const CAN_DROP_MAIN_GROUP_DND_TYPES = [
    QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
    QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
    QUERY_BUILDER_FILTER_DND_TYPE.CONDITION,
    QUERY_BUILDER_FUNCTION_DND_TYPE,
];
const CAN_DROP_DERIVATION_PROJECTION_COLUMN_DND_TYPES = [
    QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ROOT,
    QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.CLASS_PROPERTY,
    QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY,
    QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY,
    QUERY_BUILDER_VARIABLE_DND_TYPE,
    QUERY_BUILDER_FUNCTION_DND_TYPE,
];
const QueryBuilderProjectionColumnContextMenu = observer(forwardRef(function QueryBuilderProjectionColumnContextMenu(props, ref) {
    const { projectionColumnState } = props;
    const removeColumn = () => projectionColumnState.tdsState.removeColumn(projectionColumnState);
    const convertToDerivation = () => {
        if (projectionColumnState instanceof QueryBuilderSimpleProjectionColumnState) {
            projectionColumnState.tdsState.transformSimpleProjectionToDerivation(projectionColumnState);
        }
    };
    return (_jsxs(MenuContent, { ref: ref, children: [projectionColumnState instanceof
                QueryBuilderSimpleProjectionColumnState && (_jsx(MenuContentItem, { onClick: convertToDerivation, children: "Convert To Derivation" })), _jsx(MenuContentItem, { onClick: removeColumn, children: "Remove" })] }));
}));
const QueryBuilderSimpleProjectionColumnEditor = observer((props) => {
    const { projectionColumnState, setColumnName, error } = props;
    return (_jsx(QueryBuilderPropertyExpressionBadge, { columnName: projectionColumnState.columnName, propertyExpressionState: projectionColumnState.propertyExpressionState, setColumnName: setColumnName, error: error }));
});
const QueryBuilderDerivationProjectionColumnEditor = observer((props) => {
    const { projectionColumnState } = props;
    const hasParserError = projectionColumnState.tdsState.hasParserError;
    const onEditorBlur = () => {
        flowResult(projectionColumnState.fetchDerivationLambdaReturnType({
            forceConversionStringToLambda: true,
            forceRefresh: true,
        })).catch(projectionColumnState.tdsState.queryBuilderState.applicationStore
            .alertUnhandledError);
    };
    const handleDrop = useCallback((item, type) => {
        if (type === QUERY_BUILDER_VARIABLE_DND_TYPE) {
            projectionColumnState.derivationLambdaEditorState.setLambdaString(`${projectionColumnState.derivationLambdaEditorState.lambdaString}${VARIABLE_REFERENCE_TOKEN}${item.variable.name}`);
        }
        else if (type === QUERY_BUILDER_FUNCTION_DND_TYPE) {
            const functionAnalysisInfo = item.node.functionAnalysisInfo;
            const functionPrettyName = functionAnalysisInfo
                ? generateFunctionCallStringFromFunctionAnalysisInfo(projectionColumnState.tdsState.queryBuilderState
                    .graphManagerState.graph, functionAnalysisInfo)
                : '';
            projectionColumnState.derivationLambdaEditorState.setLambdaString(`${projectionColumnState.derivationLambdaEditorState.lambdaString}${functionPrettyName}`);
        }
        else {
            projectionColumnState.derivationLambdaEditorState.setLambdaString(projectionColumnState.derivationLambdaEditorState.lambdaString +
                item.node.dndText);
        }
    }, [projectionColumnState]);
    const [, dropConnector] = useDrop(() => ({
        accept: CAN_DROP_DERIVATION_PROJECTION_COLUMN_DND_TYPES,
        drop: (item, monitor) => {
            if (!monitor.didDrop()) {
                handleDrop(item, monitor.getItemType());
            } // prevent drop event propagation to accomondate for nested DnD
        },
    }), [handleDrop]);
    const ref = useRef(null);
    dropConnector(ref);
    return (_jsx("div", { ref: ref, className: clsx('query-builder__lambda-editor__container query-builder__projection__column__derivation', { backdrop__element: hasParserError }), children: _jsx(InlineLambdaEditor, { className: "query-builder__lambda-editor", disabled: projectionColumnState.tdsState.isConvertDerivationProjectionObjects, lambdaEditorState: projectionColumnState.derivationLambdaEditorState, forceBackdrop: hasParserError, onEditorBlur: onEditorBlur }) }));
});
const formatCalendarFunctionOptionLabel = (option) => (_jsxs("div", { className: "query-builder__projection__calendar__function__label", title: option.value.getLabel(), children: [_jsx(FunctionIcon, { className: "query-builder__projection__calendar__function__label__icon" }), _jsx("div", { className: "query-builder__projection__calendar__function__label__title", children: option.value.getLabel() })] }));
const buildCalendarFunctionOption = (calendarFunction) => ({
    label: calendarFunction.getLabel(),
    value: calendarFunction,
});
const buildCalendarFunctionDateColumnOption = (dateColumn, parameter, humanizeLabel) => {
    if (dateColumn instanceof Property) {
        const propertyExpression = new AbstractPropertyExpression('');
        propertyExpression_setFunc(propertyExpression, PropertyExplicitReference.create(guaranteeNonNullable(dateColumn)));
        propertyExpression.parametersValues = [parameter];
        return {
            label: getPropertyChainName(propertyExpression, humanizeLabel),
            value: propertyExpression,
        };
    }
    else {
        return {
            label: getPropertyChainName(dateColumn, humanizeLabel),
            value: dateColumn,
        };
    }
};
const buildCalendarTypeOption = (val) => ({
    label: (_jsxs("div", { className: "query-builder__projection__calendar__type__option", children: [_jsx(CalendarIcon, { className: "query-builder__projection__calendar__type__option__icon" }), _jsx("div", { className: "query-builder__projection__calendar__type__option__title", children: val })] })),
    value: val,
});
const QueryBuilderProjectionColumnEditor = observer((props) => {
    const { isRearrangeActive, projectionColumnState, columnIdx, currentRearrangeDraggedColumnIndex, setCurrentRearrangeDraggedColumnIndex, currentRearrangeDropGapIndex, setCurrentRearrangeDropGapIndex, } = props;
    const applicationStore = useApplicationStore();
    const ref = useRef(null);
    const dragHandleRef = useRef(null);
    const [isSelectedFromContextMenu, setIsSelectedFromContextMenu] = useState(false);
    const onContextMenuOpen = () => setIsSelectedFromContextMenu(true);
    const onContextMenuClose = () => setIsSelectedFromContextMenu(false);
    const tdsState = projectionColumnState.tdsState;
    const isCalendarEnabled = tdsState.queryBuilderState.isCalendarEnabled;
    const isRemovalDisabled = tdsState.isColumnInUse(projectionColumnState);
    const removeColumn = () => tdsState.removeColumn(projectionColumnState);
    // name
    const setColumnName = (columnName) => projectionColumnState.setColumnName(columnName);
    const isDuplicatedColumnName = projectionColumnState.tdsState.isDuplicateColumn(projectionColumnState);
    // aggregation
    const aggregateColumnState = tdsState.aggregationState.columns.find((column) => column.projectionColumnState === projectionColumnState);
    const aggreateOperators = tdsState.aggregationState.operators.filter((op) => op.isCompatibleWithColumn(projectionColumnState));
    const changeOperator = (val) => () => tdsState.aggregationState.changeColumnAggregateOperator(val, projectionColumnState);
    // calendar
    const aggregateCalendarFunctionDateColumns = tdsState.queryBuilderState.class?.properties.filter((p) => {
        const _type = p.genericType.value.rawType.name;
        if (_type === PRIMITIVE_TYPE.DATE ||
            _type === PRIMITIVE_TYPE.STRICTDATE) {
            return true;
        }
        return false;
    }) ?? [];
    const calendarFunctionDateColumnOptions = aggregateCalendarFunctionDateColumns.map((option) => buildCalendarFunctionDateColumnOption(option, new VariableExpression(aggregateColumnState?.calendarFunction?.lambdaParameterName ??
        DEFAULT_LAMBDA_VARIABLE_NAME, Multiplicity.ONE), tdsState.queryBuilderState.explorerState.humanizePropertyName));
    const calendarTypeOptions = Object.values(QUERY_BUILDER_CALENDAR_TYPE).map(buildCalendarTypeOption);
    const selectedCalendarTypeOption = aggregateColumnState?.calendarFunction
        ?.calendarType
        ? buildCalendarTypeOption(aggregateColumnState.calendarFunction.calendarType)
        : null;
    const onCalendarTypeOptionChange = (option) => {
        if (option.value !== aggregateColumnState?.calendarFunction?.calendarType) {
            aggregateColumnState?.calendarFunction?.setCalendarType(option.value);
        }
    };
    const defaultEndDate = observe_PrimitiveInstanceValue(new PrimitiveInstanceValue(GenericTypeExplicitReference.create(new GenericType(PrimitiveType.STRICTDATE))), tdsState.queryBuilderState.observerContext);
    instanceValue_setValues(defaultEndDate, [generateDefaultValueForPrimitiveType(PRIMITIVE_TYPE.STRICTDATE)], tdsState.queryBuilderState.observerContext);
    const resetEndDate = () => {
        if (aggregateColumnState?.calendarFunction) {
            aggregateColumnState.calendarFunction.setEndDate(defaultEndDate);
        }
    };
    const aggregateCalendarFunctions = tdsState.aggregationState.calendarFunctions.filter((cf) => cf.isCompatibleWithColumn(projectionColumnState));
    const calendarFunctionOptions = aggregateCalendarFunctions.map(buildCalendarFunctionOption);
    const selectedCalendarFunctionOption = aggregateColumnState?.calendarFunction
        ? buildCalendarFunctionOption(aggregateColumnState.calendarFunction)
        : null;
    const onCalendarFunctionOptionChange = (option) => {
        if (option?.value !== aggregateColumnState?.calendarFunction) {
            const lambdaParameterName = aggregateColumnState?.calendarFunction?.lambdaParameterName;
            const dateColumn = aggregateColumnState?.calendarFunction?.dateColumn;
            const endDate = aggregateColumnState?.calendarFunction?.endDate;
            const calendarType = aggregateColumnState?.calendarFunction?.calendarType;
            aggregateColumnState?.setCalendarFunction(option?.value ?? undefined);
            const calendarFunction = aggregateColumnState?.calendarFunction;
            if (calendarFunction) {
                if (lambdaParameterName) {
                    calendarFunction.setLambdaParameterName(lambdaParameterName);
                }
                if (dateColumn) {
                    calendarFunction.setDateColumn(dateColumn);
                }
                else {
                    if (calendarFunctionDateColumnOptions[0]) {
                        calendarFunction.setDateColumn(guaranteeNonNullable(calendarFunctionDateColumnOptions[0])
                            .value);
                    }
                    else {
                        applicationStore.notificationService.notifyWarning('Please provide a date attribute for the calendar function');
                    }
                }
                if (endDate) {
                    calendarFunction.setEndDate(endDate);
                }
                else {
                    calendarFunction.setEndDate(defaultEndDate);
                }
                if (calendarType) {
                    calendarFunction.setCalendarType(calendarType);
                }
                else {
                    calendarFunction.setCalendarType(guaranteeNonNullable(calendarTypeOptions[0]).value);
                }
            }
        }
    };
    const handleDroppingColumn = useCallback((type) => {
        if (type === QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE &&
            currentRearrangeDropGapIndex !== undefined &&
            currentRearrangeDraggedColumnIndex !== undefined) {
            tdsState.moveColumn(currentRearrangeDraggedColumnIndex, currentRearrangeDropGapIndex === tdsState.projectionColumns.length
                ? tdsState.projectionColumns.length - 1
                : currentRearrangeDropGapIndex);
        }
        setCurrentRearrangeDraggedColumnIndex(undefined);
        setCurrentRearrangeDropGapIndex(undefined);
    }, [
        tdsState,
        currentRearrangeDropGapIndex,
        currentRearrangeDraggedColumnIndex,
        setCurrentRearrangeDraggedColumnIndex,
        setCurrentRearrangeDropGapIndex,
    ]);
    // Drag and Drop
    const handleHover = useCallback((item, monitor) => {
        const dragIndex = tdsState.projectionColumns.findIndex((e) => e === item.columnState);
        const hoveredRectangle = ref.current?.getBoundingClientRect();
        const hoveredRectangleMiddle = hoveredRectangle?.top && hoveredRectangle.bottom
            ? (hoveredRectangle.top + hoveredRectangle.bottom) / 2
            : undefined;
        const yCoordinate = monitor.getClientOffset()?.y ?? 0;
        if (yCoordinate && hoveredRectangleMiddle) {
            setCurrentRearrangeDropGapIndex(yCoordinate < hoveredRectangleMiddle ? columnIdx : columnIdx + 1);
        }
        // move the item being hovered on when the dragged item position is beyond the its middle point
        const hoverBoundingReact = ref.current?.getBoundingClientRect();
        const distanceThreshold = ((hoverBoundingReact?.bottom ?? 0) - (hoverBoundingReact?.top ?? 0)) /
            2;
        const dragDistance = yCoordinate - (hoverBoundingReact?.top ?? 0);
        if (dragIndex === -1 || columnIdx === -1 || dragIndex === columnIdx) {
            return;
        }
        if (dragIndex < columnIdx && dragDistance < distanceThreshold) {
            return;
        }
        if (dragIndex > columnIdx && dragDistance > distanceThreshold) {
            return;
        }
        setCurrentRearrangeDraggedColumnIndex(dragIndex);
    }, [
        tdsState,
        columnIdx,
        setCurrentRearrangeDropGapIndex,
        setCurrentRearrangeDraggedColumnIndex,
    ]);
    const [, dropConnector] = useDrop(() => ({
        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
        hover: (item, monitor) => handleHover(item, monitor),
        drop: (item, monitor) => {
            if (!monitor.didDrop()) {
                handleDroppingColumn(monitor.getItemType());
            }
        },
    }), [handleHover, handleDroppingColumn]);
    const [{ projectionColumnBeingDragged }, dragConnector, dragPreviewConnector,] = useDrag(() => ({
        type: QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE,
        item: () => ({
            columnState: projectionColumnState,
        }),
        collect: (monitor) => ({
            /**
             * @workaround typings - https://github.com/react-dnd/react-dnd/pull/3484
             */
            projectionColumnBeingDragged: 
            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
            monitor.getItem()
                ?.columnState,
        }),
    }), [projectionColumnState]);
    dragConnector(dragHandleRef);
    dropConnector(ref);
    useDragPreviewLayer(dragPreviewConnector);
    const toggleHideCalendarColumnState = () => {
        if (aggregateColumnState) {
            aggregateColumnState.setHideCalendarColumnState(!aggregateColumnState.hideCalendarColumnState);
        }
    };
    // Drag and Drop on calendar function date column
    const handleDrop = useCallback((item, type) => {
        if (type === QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY) {
            if (item.node.type.name === PRIMITIVE_TYPE.DATE ||
                item.node.type.name === PRIMITIVE_TYPE.STRICTDATE) {
                aggregateColumnState?.calendarFunction?.setDateColumn(buildPropertyExpressionFromExplorerTreeNodeData(item.node, tdsState.queryBuilderState.explorerState, aggregateColumnState.calendarFunction.lambdaParameterName));
            }
            else {
                applicationStore.notificationService.notifyWarning(`${item.node.type.name} type is not compaible with calendar function date column`);
            }
        }
    }, [
        aggregateColumnState?.calendarFunction,
        applicationStore.notificationService,
        tdsState.queryBuilderState.explorerState,
    ]);
    const [{ isDragOver }, panelDropConnector] = useDrop(() => ({
        accept: [QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY],
        drop: (item, monitor) => {
            if (!monitor.didDrop()) {
                handleDrop(item, monitor.getItemType());
            } // prevent drop event propagation to accomondate for nested DnD
        },
        collect: (monitor) => ({
            isDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDrop]);
    const panelRef = useRef(null);
    panelDropConnector(panelRef);
    const percentileButtonRef = useRef(null);
    const percentileInputRef = useRef(null);
    const [isPercentileOpen, setIsPercentileOpen] = useState(false);
    const [percentileValue, setPercentileValue] = useState(aggregateColumnState &&
        aggregateColumnState.operator instanceof
            QueryBuilderAggregateOperator_Percentile &&
        aggregateColumnState.operator.percentile !== undefined
        ? aggregateColumnState.operator.percentile.toString()
        : '');
    const [acending, setAcending] = useState(aggregateColumnState &&
        aggregateColumnState.operator instanceof
            QueryBuilderAggregateOperator_Percentile
        ? aggregateColumnState.operator.acending
        : undefined);
    const [continuous, setContinuous] = useState(aggregateColumnState &&
        aggregateColumnState.operator instanceof
            QueryBuilderAggregateOperator_Percentile
        ? aggregateColumnState.operator.continuous
        : undefined);
    const percentileOptions = ['true', 'false'].map((op) => ({
        label: op,
        value: op,
    }));
    const getPercentileDisplayValue = () => {
        if (percentileValue === '') {
            return '...';
        }
        if (acending === undefined || continuous === undefined) {
            return `${Number(percentileValue)}`;
        }
        return `${Number(percentileValue)}, ${acending}, ${continuous}`;
    };
    const setPercentileArguments = () => {
        setIsPercentileOpen(!isPercentileOpen);
    };
    const onPercentileValueChange = (event) => {
        setPercentileValue(event.target.value);
    };
    return (_jsx(PanelDnDEntry, { ref: ref, placeholder: _jsx("div", { className: clsx({
                'query-builder__projection__column__placeholder--bottom': currentRearrangeDropGapIndex === columnIdx + 1 &&
                    columnIdx === tdsState.projectionColumns.length - 1,
            }, {
                'query-builder__projection__column__placeholder--top': currentRearrangeDropGapIndex === columnIdx,
            }) }), showPlaceholder: projectionColumnBeingDragged !== undefined && isRearrangeActive, className: "query-builder__projection__column", children: _jsxs(ContextMenu, { content: _jsx(QueryBuilderProjectionColumnContextMenu, { projectionColumnState: projectionColumnState }), disabled: !(projectionColumnState instanceof
                QueryBuilderSimpleProjectionColumnState), className: clsx('query-builder__projection__column__context-menu', {
                'query-builder__projection__column--selected-from-context-menu': isSelectedFromContextMenu,
            }), menuProps: { elevation: 7 }, onOpen: onContextMenuOpen, onClose: onContextMenuClose, children: [_jsxs("div", { "data-testid": QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_PROJECTION_COLUMN, ref: dragHandleRef, className: clsx('query-builder__projection__column__container', {
                        'query-builder__projection__column__container--dragging': projectionColumnBeingDragged !== undefined,
                    }), children: [projectionColumnState instanceof
                            QueryBuilderSimpleProjectionColumnState && (_jsxs(_Fragment, { children: [_jsx(QueryBuilderPropertyInfoTooltip, { title: projectionColumnState.propertyExpressionState.title, property: projectionColumnState.propertyExpressionState
                                        .propertyExpression.func.value, path: getPropertyPath(projectionColumnState.propertyExpressionState
                                        .propertyExpression), isMapped: true, placement: "bottom-start", explorerState: projectionColumnState.propertyExpressionState
                                        .queryBuilderState.explorerState, children: _jsx("div", { className: "query-builder-property-expression-badge__property__info", children: _jsx(InfoCircleIcon, {}) }) }), _jsx("div", { className: "query-builder__projection__column__value", children: _jsx(QueryBuilderSimpleProjectionColumnEditor, { projectionColumnState: projectionColumnState, setColumnName: setColumnName, error: isDuplicatedColumnName
                                            ? 'Duplicated column'
                                            : projectionColumnState.columnName.length === 0
                                                ? 'Empty column name'
                                                : undefined }) })] })), projectionColumnState instanceof
                            QueryBuilderDerivationProjectionColumnState && (_jsxs(_Fragment, { children: [_jsx(QueryBuilderDerivationInfoTooltip, { title: projectionColumnState.columnName, type: projectionColumnState.returnType, placement: "bottom-start", children: _jsx("div", { className: "query-builder-property-expression-badge__property__info", children: _jsx(CalculatorIcon, {}) }) }), _jsxs("div", { className: "query-builder__projection__column__value", children: [_jsx(QueryBuilderEditablePropertyName, { columnName: projectionColumnState.columnName, setColumnName: setColumnName, error: isDuplicatedColumnName
                                                ? 'Duplicated column'
                                                : projectionColumnState.columnName.length === 0
                                                    ? 'Empty column name'
                                                    : undefined, title: projectionColumnState.columnName, defaultColumnName: "(derivation)" }), _jsx(QueryBuilderDerivationProjectionColumnEditor, { projectionColumnState: projectionColumnState })] })] })), _jsx("div", { className: "query-builder__projection__column__aggregate", children: _jsxs("div", { className: "query-builder__projection__column__aggregate__operator", children: [aggregateColumnState && (_jsx("div", { className: "query-builder__projection__column__aggregate__operator", children: _jsxs("div", { className: "query-builder__projection__column__aggregate__operator__label", children: [aggregateColumnState.operator.getLabel(projectionColumnState), aggregateColumnState.operator instanceof
                                                    QueryBuilderAggregateOperator_Wavg && (_jsx(WavgParamDNDZone, { column: aggregateColumnState.operator, tdsState: tdsState })), aggregateColumnState.operator instanceof
                                                    QueryBuilderAggregateOperator_Percentile && (_jsx("button", { className: "query-builder__projection__column__aggregate__operator__percentile__badge", ref: percentileButtonRef, onClick: setPercentileArguments, title: "Set Percentile Argument(s)...", children: getPercentileDisplayValue() }))] }) })), aggregateColumnState && isPercentileOpen && (_jsx(BasePopover, { open: isPercentileOpen, slotProps: {
                                            paper: {
                                                classes: {
                                                    root: 'query-builder__projection__column__aggregate__operator__percentile__container__root',
                                                },
                                            },
                                        }, className: clsx('query-builder__projection__column__aggregate__operator__percentile__container'), anchorEl: percentileButtonRef.current, onClose: () => {
                                            const percentileOperator = aggregateColumnState.operator;
                                            if (percentileValue === '') {
                                                percentileOperator.setPercentile(undefined);
                                            }
                                            else {
                                                percentileOperator.setPercentile(Number(percentileValue));
                                            }
                                            if (acending !== undefined && continuous !== undefined) {
                                                percentileOperator.setAcending(acending);
                                                percentileOperator.setContinuous(continuous);
                                            }
                                            setIsPercentileOpen(false);
                                        }, anchorOrigin: {
                                            vertical: 'bottom',
                                            horizontal: 'left',
                                        }, transformOrigin: {
                                            vertical: 'top',
                                            horizontal: 'center',
                                        }, children: _jsxs("div", { "data-testid": QUERY_BUILDER_TEST_ID.QUERY_BUILDER_PERCENTILE_PANEL, children: [_jsxs("div", { className: "query-builder__projection__column__aggregate__operator__percentile__argument-combo", children: [_jsxs("div", { className: "query-builder__projection__column__aggregate__operator__percentile__argument-combo__label", children: ["Percentile", _jsx("br", {}), "(0-100)"] }), _jsx("div", { className: clsx('query-builder__projection__column__aggregate__operator__percentile__argument-combo__value'), children: _jsx(InputWithInlineValidation, { ref: percentileInputRef, className: clsx('query-builder__projection__column__aggregate__operator__percentile__input input--dark'), type: "text", inputMode: "numeric", onChange: onPercentileValueChange, value: percentileValue, error: percentileValue && Number(percentileValue) > 100
                                                                    ? `Invalid aggregation agruement for ${aggregateColumnState.columnName}`
                                                                    : undefined }) })] }), _jsxs("div", { className: "query-builder__projection__column__aggregate__operator__percentile__argument-combo", children: [_jsx("div", { className: "query-builder__projection__column__aggregate__operator__percentile__argument-combo__label", children: "Acending" }), _jsx(CustomSelectorInput, { className: "query-loader__results__sort-by__selector query-builder__projection__column__aggregate__operator__percentile__argument-combo__value", options: percentileOptions, onChange: (option) => {
                                                                setAcending(option.value === 'true' ? true : false);
                                                            }, value: {
                                                                label: acending === undefined
                                                                    ? ''
                                                                    : acending
                                                                        ? 'true'
                                                                        : 'false',
                                                                value: acending === undefined
                                                                    ? ''
                                                                    : acending
                                                                        ? 'true'
                                                                        : 'false',
                                                            }, darkMode: !applicationStore.layoutService
                                                                .TEMPORARY__isLightColorThemeEnabled })] }), _jsxs("div", { className: "query-builder__projection__column__aggregate__operator__percentile__argument-combo", children: [_jsx("div", { className: "query-builder__projection__column__aggregate__operator__percentile__argument-combo__label", children: "Continous" }), _jsx(CustomSelectorInput, { className: "query-loader__results__sort-by__selector query-builder__projection__column__aggregate__operator__percentile__argument-combo__value", options: percentileOptions, onChange: (option) => setContinuous(option.value === 'true' ? true : false), value: {
                                                                label: continuous === undefined
                                                                    ? ''
                                                                    : continuous
                                                                        ? 'true'
                                                                        : 'false',
                                                                value: continuous === undefined
                                                                    ? ''
                                                                    : continuous
                                                                        ? 'true'
                                                                        : 'false',
                                                            }, darkMode: !applicationStore.layoutService
                                                                .TEMPORARY__isLightColorThemeEnabled })] })] }) })), isCalendarEnabled &&
                                        aggregateColumnState &&
                                        aggregateCalendarFunctions.length > 0 && (_jsx("div", { className: clsx('query-builder__projection__column__aggregate__calendar__toggler', {
                                            'query-builder__projection__column__aggregate__calendar__toggler--active': !aggregateColumnState.hideCalendarColumnState,
                                        }), onClick: toggleHideCalendarColumnState, title: "Toggle calendar aggregation", children: _jsx(CalendarClockIcon, {}) })), _jsxs(ControlledDropdownMenu, { className: "query-builder__projection__column__aggregate__operator__dropdown", title: "Choose Aggregate Operator...", disabled: !aggreateOperators.length, content: _jsxs(MenuContent, { children: [aggregateColumnState && (_jsx(MenuContentItem, { className: "query-builder__projection__column__aggregate__operator__dropdown__option", onClick: changeOperator(undefined), children: "(none)" })), aggreateOperators.map((op) => (_jsx(MenuContentItem, { className: "query-builder__projection__column__aggregate__operator__dropdown__option", onClick: changeOperator(op), children: op.getLabel(projectionColumnState) }, op.uuid)))] }), menuProps: {
                                            anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
                                            transformOrigin: { vertical: 'top', horizontal: 'left' },
                                            elevation: 7,
                                        }, children: [_jsx("div", { className: clsx('query-builder__projection__column__aggregate__operator__badge', {
                                                    'query-builder__projection__column__aggregate__operator__badge--activated': Boolean(aggregateColumnState),
                                                }), children: _jsx(SigmaIcon, {}) }), _jsx("div", { className: "query-builder__projection__column__aggregate__operator__dropdown__trigger", children: _jsx(CaretDownIcon, {}) })] })] }) }), _jsx("div", { className: "query-builder__projection__column__actions", children: _jsx("button", { className: "query-builder__projection__column__action", tabIndex: -1, onClick: removeColumn, disabled: isRemovalDisabled, title: isRemovalDisabled
                                    ? // TODO: We may want to provide a list of all places where column is in use
                                        "This column is used and can't be removed"
                                    : 'Remove', name: "Remove", children: _jsx(TimesIcon, {}) }) })] }), isCalendarEnabled &&
                    aggregateColumnState &&
                    aggregateCalendarFunctions.length > 0 && (_jsxs("div", { className: clsx('query-builder__projection__calendar__container', {
                        'query-builder__projection__calendar__container--hidden': aggregateColumnState.hideCalendarColumnState,
                    }), children: [_jsx(CustomSelectorInput, { className: "query-builder__projection__calendar__function", options: calendarFunctionOptions, onChange: onCalendarFunctionOptionChange, value: selectedCalendarFunctionOption, formatOptionLabel: formatCalendarFunctionOptionLabel, placeholder: "Select Calendar Function", isClearable: true, escapeClearsValue: true, darkMode: !applicationStore.layoutService
                                .TEMPORARY__isLightColorThemeEnabled }), _jsx("div", { className: "query-builder__projection__calendar__value", children: _jsx(BasicValueSpecificationEditor, { valueSpecification: aggregateColumnState.calendarFunction?.endDate ??
                                    defaultEndDate, setValueSpecification: (val) => {
                                    aggregateColumnState.calendarFunction?.setEndDate(val);
                                }, graph: tdsState.queryBuilderState.graphManagerState.graph, observerContext: tdsState.queryBuilderState.observerContext, typeCheckOption: {
                                    expectedType: PrimitiveType.STRICTDATE,
                                }, className: "query-builder__parameters__value__editor", resetValue: resetEndDate }) }), _jsx("div", { className: "query-builder__projection__calendar__date__column", ref: panelRef, children: _jsx(PanelEntryDropZonePlaceholder, { isDragOver: isDragOver, label: "Change Date Column", className: "query-builder__projection__calendar__date__column__dnd__placeholder", children: aggregateColumnState.calendarFunction?.dateColumn ? (_jsxs("div", { className: "query-builder__projection__calendar__date__column__label__box", children: [_jsx("div", { className: "query-builder__projection__calendar__date__column__prefix", children: "on" }), _jsx("div", { className: "query-builder__projection__calendar__date__column__label", children: getPropertyChainName(aggregateColumnState.calendarFunction.dateColumn, tdsState.queryBuilderState.explorerState
                                                .humanizePropertyName) })] })) : (_jsx("div", { className: "query-builder__projection__calendar__date__column__placeholder", children: "Drag and drop date column here" })) }) }), _jsx(CustomSelectorInput, { className: "query-builder__projection__calendar__type", options: calendarTypeOptions, onChange: onCalendarTypeOptionChange, value: selectedCalendarTypeOption ?? calendarTypeOptions[0], placeholder: "Select calendar type", disabled: !aggregateColumnState.calendarFunction, darkMode: !applicationStore.layoutService
                                .TEMPORARY__isLightColorThemeEnabled })] }))] }) }));
});
export const QueryBuilderTDSPanel = observer((props) => {
    const applicationStore = useApplicationStore();
    const { tdsState } = props;
    const projectionColumns = tdsState.projectionColumns;
    const isEmpty = tdsState.projectionColumns.length === 0;
    const [currentRearrangeDraggedColumnIndex, setCurrentRearrangeDraggedColumnIndex,] = useState();
    const [currentRearrangeDropGapIndex, setCurrentRearrangeDropGapIndex] = useState();
    // Toolbar
    const openResultSetModifierEditor = () => tdsState.resultSetModifierState.setShowModal(true);
    const addNewBlankDerivation = () => tdsState.addNewBlankDerivation();
    const clearAllProjectionColumns = () => {
        tdsState.checkBeforeClearingColumns(() => {
            tdsState.removeAllColumns();
            tdsState.resultSetModifierState.reset();
        });
    };
    // Drag and Drop
    const handleDrop = useCallback((item, type) => {
        switch (type) {
            case QUERY_BUILDER_FUNCTION_DND_TYPE: {
                const derivationProjectionColumn = new QueryBuilderDerivationProjectionColumnState(tdsState, tdsState.queryBuilderState.graphManagerState.graphManager.createDefaultBasicRawLambda({ addDummyParameter: true }));
                const functionAnalysisInfo = item.node.functionAnalysisInfo;
                const functionPrettyName = functionAnalysisInfo
                    ? generateFunctionCallStringFromFunctionAnalysisInfo(tdsState.queryBuilderState.graphManagerState.graph, functionAnalysisInfo)
                    : '';
                derivationProjectionColumn.derivationLambdaEditorState.setLambdaString(`${DEFAULT_LAMBDA_VARIABLE_NAME}${LAMBDA_PIPE}${functionPrettyName} `);
                tdsState.addColumn(derivationProjectionColumn);
                break;
            }
            case QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.ENUM_PROPERTY:
            case QUERY_BUILDER_EXPLORER_TREE_DND_TYPE.PRIMITIVE_PROPERTY:
                tdsState.addColumn(new QueryBuilderSimpleProjectionColumnState(tdsState, buildPropertyExpressionFromExplorerTreeNodeData(item.node, tdsState.queryBuilderState.explorerState), tdsState.queryBuilderState.explorerState.humanizePropertyName));
                break;
            case QUERY_BUILDER_FILTER_DND_TYPE.CONDITION:
                if (item.node instanceof QueryBuilderFilterTreeConditionNodeData) {
                    const propertyExpression = isExistsNodeChild(item.node)
                        ? buildPropertyExpressionFromExistsNode(tdsState.queryBuilderState.filterState, guaranteeNonNullable(getFurthestExistsNodeParent(item.node)), item.node)
                        : cloneAbstractPropertyExpression(item.node.condition.propertyExpressionState
                            .propertyExpression, tdsState.queryBuilderState.observerContext);
                    tdsState.addColumn(new QueryBuilderSimpleProjectionColumnState(tdsState, propertyExpression, tdsState.queryBuilderState.explorerState.humanizePropertyName));
                }
                break;
            default:
                break;
        }
    }, [tdsState]);
    const [{ isDragOver }, panelDropConnector] = useDrop(() => ({
        accept: CAN_DROP_MAIN_GROUP_DND_TYPES,
        drop: (item, monitor) => {
            if (!monitor.didDrop()) {
                handleDrop(item, monitor.getItemType());
            } // prevent drop event propagation to accomondate for nested DnD
        },
        collect: (monitor) => ({
            isDragOver: monitor.isOver({ shallow: true }),
        }),
    }), [handleDrop]);
    const panelRef = useRef(null);
    panelDropConnector(panelRef);
    const [{ isRearrangeActive }, dropConnector] = useDrop(() => ({
        accept: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE],
        collect: (monitor) => ({
            isRearrangeActive: monitor.isOver({ shallow: false }),
        }),
    }), []);
    const ref = useRef(null);
    dropConnector(ref);
    const { isDroppable } = useDragLayer((monitor) => ({
        isDroppable: monitor.isDragging() &&
            CAN_DROP_MAIN_GROUP_DND_TYPES.includes(monitor.getItemType()?.toString() ?? ''),
    }));
    useEffect(() => {
        flowResult(tdsState.convertDerivationProjectionObjects()).catch(applicationStore.alertUnhandledError);
    }, [applicationStore, tdsState]);
    return (_jsxs(PanelContent, { children: [_jsxs("div", { className: "query-builder__projection__toolbar", children: [_jsxs("div", { className: "query-builder__projection__result-modifier-prompt", "data-testid": QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_RESULT_MODIFIER_PROMPT, children: [_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__header", children: [_jsxs("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, title: "Configure Query Options...", children: [_jsx(CogIcon, { className: "query-builder__projection__result-modifier-prompt__header__label__icon" }), _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: tdsState.isQueryOptionsSet
                                                    ? 'Query Options'
                                                    : 'Set Query Options' })] }), _jsx("div", { className: clsx('query-builder__projection__result-modifier-prompt__divider', {
                                            'query-builder__projection__result-modifier-prompt__divider--light': applicationStore.layoutService
                                                .TEMPORARY__isLightColorThemeEnabled,
                                        }), children: tdsState.isQueryOptionsSet && ' - ' }), tdsState.queryBuilderState.milestoningState
                                        .isAllVersionsEnabled &&
                                        !tdsState.queryBuilderState.milestoningState
                                            .isAllVersionsInRangeEnabled && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "All Versions" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: "Yes" }) })] })), tdsState.queryBuilderState.milestoningState
                                        .isAllVersionsInRangeEnabled &&
                                        tdsState.queryBuilderState.milestoningState.startDate &&
                                        tdsState.queryBuilderState.milestoningState.endDate && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "All Versions" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsxs("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: ["(", getNameOfValueSpecification(tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(tdsState.queryBuilderState.milestoningState
                                                            .startDate) ??
                                                            tdsState.queryBuilderState.milestoningState
                                                                .startDate, tdsState.queryBuilderState), ' ', "-", ' ', getNameOfValueSpecification(tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(tdsState.queryBuilderState.milestoningState.endDate) ??
                                                            tdsState.queryBuilderState.milestoningState.endDate, tdsState.queryBuilderState), ")"] }) })] })), tdsState.queryBuilderState.milestoningState.businessDate && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Business Date" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: getNameOfValueSpecification(tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(tdsState.queryBuilderState.milestoningState
                                                        .businessDate) ??
                                                        tdsState.queryBuilderState.milestoningState
                                                            .businessDate, tdsState.queryBuilderState) }) })] })), tdsState.queryBuilderState.milestoningState.processingDate && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Processing Date" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: getNameOfValueSpecification(tdsState.queryBuilderState.milestoningState.getMilestoningParameterValue(tdsState.queryBuilderState.milestoningState
                                                        .processingDate) ??
                                                        tdsState.queryBuilderState.milestoningState
                                                            .processingDate, tdsState.queryBuilderState) }) })] }))] }), tdsState.resultSetModifierState.limit && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Max Rows" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: tdsState.resultSetModifierState.limit }) })] })), tdsState.resultSetModifierState.distinct && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Eliminate Duplicate Rows" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: "Yes" }) })] })), tdsState.resultSetModifierState.sortColumns.length > 0 && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Sort" }), tdsState.resultSetModifierState.sortColumns.map((columnState) => (_jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: `${columnState.columnState.columnName} ${columnState.sortType}` }) }, columnState.columnState.uuid)))] })), tdsState.resultSetModifierState.slice && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Slice" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: _jsx("div", { className: "query-builder__projection__result-modifier-prompt__header__label__title", children: `${tdsState.resultSetModifierState.slice[0]},${tdsState.resultSetModifierState.slice[1]}` }) })] })), tdsState.queryBuilderState.watermarkState.value && (_jsxs("div", { className: "query-builder__projection__result-modifier-prompt__group", children: [_jsx("div", { className: "query-builder__projection__result-modifier-prompt__group__label", children: "Watermark" }), _jsx("button", { className: "query-builder__projection__result-modifier-prompt__header__label editable-value", onClick: openResultSetModifierEditor, children: getNameOfValueSpecification(tdsState.queryBuilderState.watermarkState.value, tdsState.queryBuilderState) })] }))] }), _jsxs("div", { className: "query-builder__projection__toolbar__actions", children: [_jsx("button", { className: "panel__header__action", disabled: isEmpty, onClick: clearAllProjectionColumns, tabIndex: -1, title: isEmpty
                                    ? 'No projection columns to clear'
                                    : 'Clear all projection columns', children: _jsx(TrashIcon, { className: "query-builder__icon query-builder__icon__query-option--small" }) }), _jsx("button", { className: "panel__header__action", onClick: addNewBlankDerivation, tabIndex: -1, title: "Add a new derivation", children: _jsx(PlusIcon, {}) })] })] }), _jsx("div", { "data-testid": QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS_PROJECTION, className: "query-builder__projection__content", children: _jsxs(PanelDropZone, { isDragOver: isDragOver && isEmpty, isDroppable: isDroppable && isEmpty, dropTargetConnector: panelDropConnector, children: [!projectionColumns.length && (_jsx(BlankPanelPlaceholder, { text: "Add a projection column", tooltipText: "Drag and drop properties here" })), Boolean(projectionColumns.length) && (_jsx("div", { "data-testid": QUERY_BUILDER_TEST_ID.QUERY_BUILDER_TDS, className: "query-builder__projection__columns", children: _jsxs("div", { ref: ref, children: [_jsx(DragPreviewLayer, { labelGetter: (item) => item.columnState.columnName === ''
                                            ? '(unknown)'
                                            : item.columnState.columnName, types: [QUERY_BUILDER_PROJECTION_COLUMN_DND_TYPE] }), projectionColumns.map((projectionColumnState, columnIdx) => (_jsx(QueryBuilderProjectionColumnEditor, { projectionColumnState: projectionColumnState, isRearrangeActive: isRearrangeActive, currentRearrangeDraggedColumnIndex: currentRearrangeDraggedColumnIndex, currentRearrangeDropGapIndex: currentRearrangeDropGapIndex, setCurrentRearrangeDraggedColumnIndex: setCurrentRearrangeDraggedColumnIndex, setCurrentRearrangeDropGapIndex: setCurrentRearrangeDropGapIndex, columnIdx: columnIdx }, projectionColumnState.uuid)))] }) })), isDroppable && !isEmpty && (_jsx("div", { ref: panelRef, className: "query-builder__projection__free-drop-zone__container", children: _jsx(PanelEntryDropZonePlaceholder, { isDragOver: isDragOver, isDroppable: isDroppable, className: "query-builder__projection__free-drop-zone", label: "Add a projection column", children: _jsx(_Fragment, {}) }) })), _jsx(QueryResultModifierModal, { tdsState: tdsState })] }) })] }));
});
//# sourceMappingURL=QueryBuilderTDSPanel.js.map