"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridFilterPanelControl = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
const ButtonClear_1 = require("../Components/Buttons/ButtonClear");
const ButtonExpand_1 = require("../Components/Buttons/ButtonExpand");
const ButtonInvalid_1 = require("../Components/Buttons/ButtonInvalid");
const ButtonPause_1 = require("../Components/Buttons/ButtonPause");
const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
const ButtonUnsuspend_1 = require("../Components/Buttons/ButtonUnsuspend");
const NamedQuerySelector_1 = require("./NamedQuerySelector");
const useGridFilterExpressionEditor_1 = require("./useGridFilterExpressionEditor");
const Flex_1 = require("../../components/Flex");
const Tooltip_1 = tslib_1.__importDefault(require("../../components/Tooltip"));
const QueryViewPanelComponent = (props) => {
    const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = (0, useGridFilterExpressionEditor_1.useGridFilterExpressionEditor)();
    if (!isAdaptableReady) {
        return null;
    }
    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }));
    const renderExpressionLabel = () => {
        const baseClasses = 'twa:font-mono twa:text-s twa:py-2 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-defaultbackground twa:text-text-on-defaultbackground twa:rounded twa:cursor-pointer twa:leading-4 twa:flex twa:items-center';
        const placeholderClasses = 'twa:text-gray-400 twa:italic';
        const labelClassName = (0, clsx_1.default)(baseClasses, {
            [placeholderClasses]: !expression,
        });
        const expressionLabel = (React.createElement(Tooltip_1.default, { label: expression || 'Click to edit Grid Filter' },
            React.createElement(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex-1 twa:h-full twa:min-w-0', labelClassName), "data-name": "grid-filter-input", onClick: onExpand }, expression || 'Grid Filter...')));
        return (React.createElement(FieldWrap_1.default, { className: "twa:flex-1 twa:min-w-0 twa:min-h-input twa:overflow-visible" },
            buttonExpand,
            expressionLabel,
            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
    };
    const hasExpression = StringExtensions_1.default.IsNotNullOrEmpty(expression);
    const hasActiveGridFilter = gridFilter != null && hasExpression;
    const hasNamedQueries = namedQueries && namedQueries.length > 0;
    const clearButton = hasExpression ? (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
    const saveButton = hasExpression ? (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: isReadOnly || gridFilterAccessLevel === 'ReadOnly' || !isExpressionValid || isExpressionNamedQuery, variant: "text", tone: "neutral" })) : null;
    const suspendButton = hasActiveGridFilter ? (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
    const namedQuerySelector = hasNamedQueries ? (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) })) : null;
    const renderButtons = () => {
        return (React.createElement(React.Fragment, null,
            clearButton,
            isSuspended ? unSuspendButton : suspendButton,
            saveButton,
            namedQuerySelector));
    };
    const isToolbar = props.viewType === 'Toolbar';
    return (React.createElement(Flex_1.Flex, { flexDirection: isToolbar ? 'row' : 'column', className: (0, clsx_1.default)(`ab-${elementType}__Query__wrap`, {
            'twa:w-[500px]': isToolbar,
        }) },
        React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
        React.createElement(Flex_1.Flex, { className: (0, clsx_1.default)('twa:flex-shrink-0', {
                'twa:pl-1': isToolbar,
                'twa:pt-1': !isToolbar,
            }) }, renderButtons())));
};
exports.GridFilterPanelControl = QueryViewPanelComponent;
