import * as React from 'react';
import clsx from 'clsx';
import StringExtensions from '../../Utilities/Extensions/StringExtensions';
import FieldWrap from '../../components/FieldWrap';
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 { ButtonSave } from '../Components/Buttons/ButtonSave';
import { ButtonUnsuspend } from '../Components/Buttons/ButtonUnsuspend';
import { NamedQuerySelector } from './NamedQuerySelector';
import { useGridFilterExpressionEditor } from './useGridFilterExpressionEditor';
import { Box, Flex } from '../../components/Flex';
import Tooltip from '../../components/Tooltip';
const QueryViewPanelComponent = (props) => {
    const { cachedQueries, expression, isExpressionNamedQuery, isExpressionValid, isSuspended, gridFilter, isAdaptableReady, namedQueries, runQuery, onExpand, clearQuery, namedQueryModuleAccessLevel, saveQuery, suspendGridFilter, unSuspendGridFilter, setGridFilterExpression, gridFilterAccessLevel, isReadOnly, } = useGridFilterExpressionEditor();
    if (!isAdaptableReady) {
        return null;
    }
    const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
    const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
    const buttonExpand = (React.createElement(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-xs twa:py-1.5 twa:px-2 twa:overflow-hidden twa:text-ellipsis twa:whitespace-nowrap twa:bg-white twa:rounded twa:cursor-pointer twa:h-7 twa:leading-4';
        const placeholderClasses = 'twa:text-gray-400 twa:italic';
        const labelClassName = clsx(baseClasses, {
            [placeholderClasses]: !expression,
        });
        const expressionLabel = (React.createElement(Tooltip, { label: expression || 'Click to edit Grid Filter' },
            React.createElement(Box, { className: clsx('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, { className: "twa:flex-1 twa:min-w-0 twa:overflow-visible" },
            buttonExpand,
            expressionLabel,
            gridFilter && !isExpressionValid && (React.createElement(ButtonInvalid, { variant: "text", tone: "neutral", tooltip: "Invalid Grid Filter" }))));
    };
    const hasExpression = StringExtensions.IsNotNullOrEmpty(expression);
    const hasActiveGridFilter = gridFilter != null && hasExpression;
    const hasNamedQueries = namedQueries && namedQueries.length > 0;
    const clearButton = hasExpression ? (React.createElement(ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral" })) : null;
    const saveButton = hasExpression ? (React.createElement(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, { onClick: () => suspendGridFilter(), tooltip: "Suspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: disabled || !isExpressionValid, variant: "text", tone: "neutral" })) : null;
    const unSuspendButton = hasActiveGridFilter ? (React.createElement(ButtonUnsuspend, { onClick: () => unSuspendGridFilter(), tooltip: "Unsuspend Grid Filter", accessLevel: gridFilterAccessLevel, disabled: !isExpressionValid, variant: "text", tone: "neutral" })) : null;
    const namedQuerySelector = hasNamedQueries ? (React.createElement(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, { flexDirection: isToolbar ? 'row' : 'column', className: clsx(`ab-${elementType}__Query__wrap`, {
            'twa:w-[500px]': isToolbar,
        }) },
        React.createElement(Flex, { className: clsx({ 'twa:flex-1 twa:min-w-0': isToolbar }) }, renderExpressionLabel()),
        React.createElement(Flex, { className: clsx('twa:flex-shrink-0', {
                'twa:pl-1': isToolbar,
                'twa:pt-1': !isToolbar,
            }) }, renderButtons())));
};
export const GridFilterPanelControl = QueryViewPanelComponent;
