"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableTopBar = void 0;
const react_1 = __importDefault(require("react"));
const inlines_1 = require("inlines");
const Input_1 = require("../Input");
const Button_1 = require("../Button");
const Text_1 = require("../Text");
const icons_1 = require("../../icons");
const varsUtilities_1 = require("../../varsUtilities");
const Styled_1 = require("../Styled");
const __1 = require("..");
const __2 = require("..");
const TableFilters_1 = require("./TableFilters");
const SearchBar = ({ searchValue, setSearchValue }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: { maxWidth: 246 } },
        react_1.default.createElement(Input_1.Input, { type: "search", placeholder: "Search for any item...", value: searchValue, onChange: (v) => setSearchValue(v), style: {
                minHeight: '32px',
                height: '32px',
                '& input': {
                    height: '32px',
                },
            } })));
};
const DisplayColumns = ({ allColumnNames, filteredColumns, setFilteredColumns, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, null,
        react_1.default.createElement(__1.Dropdown.Root, null,
            react_1.default.createElement(__1.Dropdown.Trigger, null,
                react_1.default.createElement(Button_1.Button, { size: "small", icon: react_1.default.createElement(icons_1.IconEye, null), color: "system", light: true, style: { marginLeft: 12 } })),
            react_1.default.createElement(__1.Dropdown.Items, null, allColumnNames.map((item, idx) => (react_1.default.createElement(Input_1.Input, { type: "checkbox", value: !filteredColumns.includes(item.value), key: idx, title: item.value, onChange: (v) => {
                    if (!v) {
                        setFilteredColumns([...filteredColumns, item.value]);
                    }
                    else {
                        setFilteredColumns([
                            ...filteredColumns.filter((snurp) => snurp !== item.value),
                        ]);
                    }
                } })))))));
};
const SelectedOptionButtons = ({ onMultiSelectDelete, rowSelectionArr, setRowSelection, }) => {
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            border: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
            borderRadius: 4,
            boxShadow: '0px 1px 4px 0px rgba(27, 36, 44, 0.04)',
            display: 'flex',
            gap: 16,
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: '2px 12px',
        } },
        react_1.default.createElement(Text_1.Text, { color: "brand", weight: "medium" },
            rowSelectionArr.length,
            " selected"),
        react_1.default.createElement(Button_1.Button, { color: "neutral", size: "xsmall", onClick: () => setRowSelection({}) }, "Clear selection"),
        react_1.default.createElement(__2.ConfirmModal, { onCancel: () => { }, onConfirm: () => {
                onMultiSelectDelete();
                setRowSelection({});
            } },
            react_1.default.createElement(Button_1.Button, { color: "alert", size: "xsmall", icon: react_1.default.createElement(icons_1.IconDelete, null) }, "Delete"))));
};
const TableTopBar = ({ onMultiSelectDelete, allColumnNames, selectedPillVal, setSelectedPillVal, searchValue, setSearchValue, filteredColumns, setFilteredColumns, rowSelection, setRowSelection, tableSearchFilterValue, setTableSearchFilterValue, operatorTableSearchValue, setOperatorTableSearchValue, style, }) => {
    const rowSelectionArr = Object.keys(rowSelection);
    return (react_1.default.createElement(inlines_1.styled.div, { style: {
            display: 'flex',
            alignItems: 'center',
            padding: '8px 6px ',
            justifyContent: 'space-between',
            borderTop: `1px solid ${(0, varsUtilities_1.color)('border', 'default', 'strong')}`,
            ...style,
        } },
        rowSelectionArr.length > 0 ? (react_1.default.createElement(SelectedOptionButtons, { onMultiSelectDelete: onMultiSelectDelete, rowSelectionArr: rowSelectionArr, setRowSelection: setRowSelection })) : (react_1.default.createElement(TableFilters_1.TableFilters, { allColumnNames: allColumnNames, setSelectedPillVal: setSelectedPillVal, selectedPillVal: selectedPillVal, tableSearchFilterValue: tableSearchFilterValue, setTableSearchFilterValue: setTableSearchFilterValue, operatorTableSearchValue: operatorTableSearchValue, setOperatorTableSearchValue: setOperatorTableSearchValue })),
        react_1.default.createElement(Styled_1.Row, null,
            react_1.default.createElement(SearchBar, { searchValue: searchValue, setSearchValue: setSearchValue }),
            react_1.default.createElement(DisplayColumns, { allColumnNames: allColumnNames, filteredColumns: filteredColumns, setFilteredColumns: setFilteredColumns }))));
};
exports.TableTopBar = TableTopBar;
//# sourceMappingURL=TableTopBar.js.map