import React from "react";
import { Store, Actions } from "../stores/ProcessMonitorStore";
import { STATISTICS } from "../constants";
/**
 * This is the "table header" that shows which columns are visible.
 * Since we aren't using an HTML table, this component exists.
 * It handles column display and sorting.
 **/
const ListHeader = () => {
    const [sort, setSort] = React.useState();
    // When the sort value changes in the store, change it locally, and re-render the direction arrow.
    const onSortChanged = (err, response) => {
        let { value } = response;
        setSort(value);
    };
    React.useEffect(() => {
        const getSort = async () => {
            const result = await (Store === null || Store === void 0 ? void 0 : Store.get(["sort"]));
            setSort(result === null || result === void 0 ? void 0 : result.data);
        };
        getSort();
        Store === null || Store === void 0 ? void 0 : Store.addListener({ field: "sort" }, onSortChanged);
        return () => {
            Store === null || Store === void 0 ? void 0 : Store.removeListener({ field: "sort" }, onSortChanged);
        };
    }, []);
    //Just a list of the things beneath it. name, CPU, mem, etc. drive from store.
    return (React.createElement("div", { className: "list-header" },
        React.createElement("div", { className: "list-header-statistic-label list-header-name", onClick: () => {
                Actions.setSort("name");
            }, tabIndex: 0, role: "button", onKeyDown: (e) => {
                if (e.key === "Enter" || e.key === " ") {
                    Actions.setSort("name");
                }
            } },
            "Name",
            (sort === null || sort === void 0 ? void 0 : sort.field) === "name" ? (sort.direction === "ascending" ? (React.createElement("i", { className: "sort-direction ff-arrow-up" })) : (React.createElement("i", { className: "sort-direction ff-arrow-down" }))) : null),
        React.createElement("div", { className: "list-header-statistic-labels" },
            STATISTICS.map((field, i) => (React.createElement("div", { key: i, className: "list-header-statistic-label", onClick: () => {
                    Actions.setSort(field.value);
                }, tabIndex: 0, role: "button", onKeyDown: (e) => {
                    if (e.key === "Enter" || e.key === " ") {
                        Actions.setSort(field.value);
                    }
                } },
                field.label,
                (sort === null || sort === void 0 ? void 0 : sort.field) === field.value ? (sort.direction === "ascending" ? (React.createElement("i", { className: "sort-direction ff-arrow-up" })) : (React.createElement("i", { className: "sort-direction ff-arrow-down" }))) : null))),
            React.createElement("div", { className: "list-header-statistic-label" }))));
};
export default ListHeader;
//# sourceMappingURL=ListHeader.js.map