import * as React from 'react';
import DropdownButton from '../../../components/DropdownButton';
import FieldWrap from '../../../components/FieldWrap';
import Input from '../../../components/Input';
import Panel from '../../../components/Panel';
import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
import { ButtonClear } from '../../Components/Buttons/ButtonClear';
import { ButtonExpand } from '../../Components/Buttons/ButtonExpand';
import { ButtonInvalid } from '../../Components/Buttons/ButtonInvalid';
import { ButtonPause } from '../../Components/Buttons/ButtonPause';
import { ButtonPlay } from '../../Components/Buttons/ButtonPlay';
import { ButtonSave } from '../../Components/Buttons/ButtonSave';
import { ButtonUnsuspend } from '../../Components/Buttons/ButtonUnsuspend';
import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
import { NamedQuerySelector } from './../NamedQuerySelector';
import { Box, Flex } from '../../../components/Flex';
export const GridFilterPopupUI = (props) => {
    const { expression, isExpressionValid, isExpressionNamedQuery, isSuspended, isReadOnly, availableColumns, namedQueries, cachedQueries, currentGridFilterExpression, headerText, glyphicon, infoLink, infoLinkDisabled, onExpressionChange, onRunQuery, onClearQuery, onSaveQuery, onSuspend, onUnsuspend, onExpand, onSelectNamedQuery, onSetGridFilterExpression, gridFilterAccessLevel, namedQueryAccessLevel, } = props;
    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
    const handleKeyDown = (e) => {
        if (e.key === 'Enter') {
            onRunQuery();
        }
    };
    return (React.createElement(PopupPanel, { className: "ab-GridFilter", headerText: headerText, glyphicon: glyphicon, infoLink: infoLink, infoLinkDisabled: infoLinkDisabled },
        React.createElement(Panel, { className: "twa:flex-1 twa:border-none twa:shadow-md twa:overflow-hidden" },
            React.createElement(Panel.FlexBody, null,
                React.createElement(Box, { className: "twa:grid twa:gap-3 twa:grid-cols-[auto_1fr] twa:items-center" },
                    "Expression:",
                    React.createElement(FieldWrap, { className: "twa:mr-1 twa:w-full" },
                        React.createElement(ButtonExpand, { disabled: disabled, variant: "text", tone: "neutral", onClick: onExpand, tooltip: "Edit the Expression in UI", className: "twa:ml-1" }),
                        React.createElement(Input, { onKeyDown: handleKeyDown, disabled: disabled, type: "text", "data-name": "grid-filter-input", placeholder: "Grid Filter", spellCheck: false, value: expression, onChange: (e) => onExpressionChange(e.target.value), className: "twa:font-mono twa:text-2" }),
                        isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => onRunQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "accent", disabled: disabled || expression === '' || expression === currentGridFilterExpression, className: "twa:mr-1" })),
                        currentGridFilterExpression && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter", className: "twa:mr-1" })),
                        ' ',
                        StringExtensions.IsNotNullOrEmpty(expression) && (React.createElement(ButtonClear, { onClick: () => onClearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel }))),
                    React.createElement(Flex, { justifyContent: "space-around", className: "twa:col-start-2" },
                        React.createElement(ButtonSave, { onClick: () => onSaveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression === '', variant: "text", tone: "neutral", className: "twa:mr-1" }, "Save"),
                        isSuspended ? (React.createElement(ButtonUnsuspend, { onClick: () => onUnsuspend(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Resume")) : (React.createElement(ButtonPause, { onClick: () => onSuspend(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral", className: "twa:mr-1" }, "Suspend")),
                        React.createElement(DropdownButton, { disabled: disabled, variant: "text", items: availableColumns, className: "twa:mr-1", tooltip: "Pick Columns", icon: "list", iconPosition: "start" }, "Columns"),
                        React.createElement(NamedQuerySelector, { disabled: disabled, namedQueries: namedQueries, cachedQueries: cachedQueries, currentQuery: currentGridFilterExpression, onSelect: (query) => onSelectNamedQuery(query), setGridFilterExpression: (query) => onSetGridFilterExpression(query) }, "Named Queries")))))));
};
