"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
/*
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
 *  License: AGPLv3 s.t. "Commons Clause" – see LICENSE.md for details
 */
const react_1 = require("react");
const antd_1 = require("antd");
const code_1 = __importDefault(require("components/landing/code"));
const lodash_1 = require("lodash");
const executables_1 = __importDefault(require("lib/landing/executables"));
const { Text } = antd_1.Typography;
const INFO_STYLE = {
    overflow: "auto",
    maxHeight: "10em",
    maxWidth: "40vw",
    backgroundColor: "rgba(150, 150, 150, 0.1)",
    fontSize: "10px",
    border: "none",
    borderRadius: "3px",
};
const PRE_STYLE = {
    padding: "5px",
    margin: 0,
    overflow: "unset", // parent div will show scroll handles
};
const COLUMNS = [
    {
        title: "Name",
        key: "name",
        dataIndex: "name",
        responsive: ["md"],
        render: (name) => ((0, jsx_runtime_1.jsx)(Text, { strong: true, style: { fontSize: "12pt" }, children: name })),
    },
    {
        title: "Path",
        key: "path",
        dataIndex: "path",
        render: (path) => (0, jsx_runtime_1.jsx)(code_1.default, { children: path }),
    },
    {
        title: "Information",
        key: "output",
        dataIndex: "output",
        width: "40%",
        render: (output) => ((0, jsx_runtime_1.jsx)("div", { style: INFO_STYLE, children: (0, jsx_runtime_1.jsx)("pre", { style: PRE_STYLE, children: output }) })),
    },
];
function ExecutablesTable({ executablesSpec, }) {
    const dataSource = (0, executables_1.default)(executablesSpec);
    const [search, setSearch] = (0, react_1.useState)("");
    const onChange = (0, react_1.useMemo)(() => (0, lodash_1.debounce)((e) => {
        setSearch(e.target.value);
    }, 300), []);
    let data;
    if (!search) {
        data = dataSource;
    }
    else {
        const s = search.toLowerCase();
        data = [];
        for (const x of dataSource) {
            if (x.path.includes(s)) {
                data.push(x);
            }
        }
    }
    return ((0, jsx_runtime_1.jsxs)("div", { style: { clear: "both" }, children: [(0, jsx_runtime_1.jsxs)("h2", { children: ["Showing ", data.length, " executables"] }), (0, jsx_runtime_1.jsx)(antd_1.Input.Search, { style: { padding: "0 30px 15px 0", width: "50%", minWidth: "300px" }, placeholder: "Search...", allowClear: true, onChange: onChange, onPressEnter: (e) => setSearch(e.target.value) }), (0, jsx_runtime_1.jsx)("div", { style: { overflowX: "auto", width: "100%" }, children: (0, jsx_runtime_1.jsx)(antd_1.Table, { columns: COLUMNS, bordered: true, pagination: false, rowKey: "path", dataSource: data }) })] }));
}
exports.default = ExecutablesTable;
//# sourceMappingURL=executables-table.js.map