"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 rebass_1 = require("rebass");
const StringExtensions_1 = tslib_1.__importDefault(require("../../Utilities/Extensions/StringExtensions"));
const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
const FieldWrap_1 = tslib_1.__importDefault(require("../../components/FieldWrap"));
const Textarea_1 = tslib_1.__importDefault(require("../../components/Textarea"));
const icons_1 = require("../../components/icons");
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 ButtonPlay_1 = require("../Components/Buttons/ButtonPlay");
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 QueryViewPanelComponent = (props) => {
    const { cachedQueries, expression, setExpression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, availableColumns, 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 handleEnter = (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            runQuery();
        }
    };
    const buttonExpand = (React.createElement(ButtonExpand_1.ButtonExpand, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", marginLeft: 1 }));
    const renderTextInput = () => {
        return props.viewType === 'Toolbar' ? (React.createElement(FieldWrap_1.default, { marginRight: 1, width: 500, style: { overflow: 'visible' } },
            buttonExpand,
            React.createElement(rebass_1.Box, { style: {
                    position: 'relative',
                    height: '100%',
                }, flex: 1 },
                React.createElement(Textarea_1.default, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                        left: 0,
                        top: 0,
                        right: 0,
                        border: 0,
                        position: 'absolute',
                        resize: 'none',
                        fontFamily: 'monospace',
                        fontSize: 12,
                        maxHeight: 52,
                        height: '100%',
                        paddingTop: 6,
                        overflow: 'hidden',
                        zIndex: 100,
                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
            isExpressionValid && (React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == gridFilter?.Expression, marginRight: 1 })),
            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid_1.ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", marginRight: 1 })),
            ' ',
            StringExtensions_1.default.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel })))) : (React.createElement(FieldWrap_1.default, { width: "100%", overflow: "visible" },
            ' ',
            buttonExpand,
            React.createElement(rebass_1.Box, { style: {
                    position: 'relative',
                    minHeight: 40,
                    width: '100%',
                }, flex: 1 },
                React.createElement(Textarea_1.default, { "data-name": "grid-filter-input", autoResizeOnFocus: true, style: {
                        left: 0,
                        top: 0,
                        right: 0,
                        border: 0,
                        position: 'absolute',
                        resize: 'none',
                        fontFamily: 'monospace',
                        fontSize: 12,
                        maxHeight: 60,
                        paddingTop: 7,
                        zIndex: 100,
                        height: '100%',
                        overflow: 'hidden',
                    }, placeholder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
    };
    const saveButton = (React.createElement(ButtonSave_1.ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));
    const suspendButton = (React.createElement(ButtonPause_1.ButtonPause, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
    const unSuspendButton = (React.createElement(ButtonUnsuspend_1.ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral", marginRight: 1 }));
    const namedQuerySelector = (React.createElement(NamedQuerySelector_1.NamedQuerySelector, { namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: gridFilter?.Expression, onSelect: (query) => runQuery(query), setGridFilterExpression: (query) => setGridFilterExpression(query) }));
    const columnsDropdown = (React.createElement(DropdownButton_1.default, { disabled: disabled, accessLevel: gridFilterAccessLevel, variant: "text", items: availableColumns, marginRight: 1, tooltip: "Pick Columns" },
        React.createElement(icons_1.Icon, { name: 'list' })));
    const renderButtons = () => {
        return props.viewType === 'Toolbar' ? (React.createElement(React.Fragment, null,
            saveButton,
            isSuspended ? unSuspendButton : suspendButton,
            columnsDropdown,
            namedQuerySelector,
            ' ')) : (React.createElement(React.Fragment, null,
            React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
            ' ',
            React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
            ' ',
            saveButton,
            isSuspended ? unSuspendButton : suspendButton,
            namedQuerySelector));
    };
    return (React.createElement(rebass_1.Flex, { onKeyDown: handleEnter, flexDirection: "row", className: `ab-${elementType}__Query__wrap`, flexWrap: props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
        React.createElement(rebass_1.Flex, { width: props.viewType === 'ToolPanel' ? '100%' : 'auto' }, renderTextInput()),
        React.createElement(rebass_1.Flex, null, renderButtons())));
};
exports.GridFilterPanelControl = QueryViewPanelComponent;
