"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableFilters = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const Input_1 = require("../Input");
const Pill_1 = require("../Pill");
const Button_1 = require("../Button");
const DatePicker_1 = require("../DatePicker");
const TableFilters = ({ allColumnNames, setSelectedPillVal, tableSearchFilterValue, setTableSearchFilterValue, operatorTableSearchValue, setOperatorTableSearchValue, selectedPillVal, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: { display: 'flex', gap: 6 } },
        react_1.default.createElement(inlines_1.styled.div, null,
            react_1.default.createElement(Pill_1.Pill, { options: allColumnNames, type: "select", value: selectedPillVal, onChange: (v) => {
                    setSelectedPillVal(v);
                }, prefix: "Field" })),
        selectedPillVal ? (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(Pill_1.Pill, { options: [
                    { value: '=', label: '=' },
                    { value: '!=', label: '!=' },
                    { value: '<', label: '<' },
                    { value: '>', label: '>' },
                    //   { value: 'AND', label: 'AND' },
                    //   { value: 'OR', label: 'OR' },
                ], type: "select", value: operatorTableSearchValue, onChange: (v) => {
                    setOperatorTableSearchValue(v);
                }, prefix: "Operator" }),
            (operatorTableSearchValue === '=' ||
                operatorTableSearchValue === '!=') && (react_1.default.createElement(Input_1.Input, { type: "text", autoFocus: true, value: tableSearchFilterValue, onChange: (v) => {
                    setTableSearchFilterValue(v);
                }, style: {
                    minHeight: '34px',
                    height: '32px',
                    '& input': {
                        height: '32px',
                    },
                } })),
            ((operatorTableSearchValue === '<' ||
                operatorTableSearchValue === '>') &&
                // or date
                selectedPillVal === 'createdAt') ||
                selectedPillVal === 'updatedAt' ? (react_1.default.createElement(DatePicker_1.DatePicker, { value: tableSearchFilterValue, onChange: (v) => setTableSearchFilterValue(v), style: {
                    marginTop: '-2px',
                    '& div ': {
                        height: '34px !important',
                        lineHeight: '30px !important',
                        borderRadius: '4px !important',
                    },
                    '& svg': {
                        marginTop: '5px',
                    },
                } })) : ((operatorTableSearchValue === '<' ||
                operatorTableSearchValue === '>') && (react_1.default.createElement(Input_1.Input, { autoFocus: true, type: "number", value: tableSearchFilterValue, onChange: (v) => {
                    setTableSearchFilterValue(v);
                }, style: {
                    minHeight: '34px',
                    height: '32px',
                    '& input': {
                        height: '32px',
                    },
                } }))),
            react_1.default.createElement(Button_1.Button, { color: "neutral", size: "xsmall", onClick: () => {
                    setTableSearchFilterValue(undefined);
                    setOperatorTableSearchValue(undefined);
                    setSelectedPillVal(undefined);
                } }, "Clear filters"))) : ('')));
};
exports.TableFilters = TableFilters;
//# sourceMappingURL=TableFilters.js.map