import React, { useEffect, useState } from "react";
import { Title } from "../../hooks/useTitle";
import { Store, Actions } from "./stores/ProcessMonitorStore";
import ListHeader from "./components/ListHeader";
import { EMPTY_TOTALS } from "./constants";
import { statReducer, roundDecimalToPrecision, bytesToSize } from "./helpers";
import "../../assets/css/processMonitor.css";
import Process from "./components/Process";
const ProcessMonitorBase = ({ title = "Finsemble Process Monitor" }) => {
    const [processList, setProcessList] = useState([]);
    const [collapsedList, setCollapsedList] = useState(new Map());
    /**
     * Invoked at minimum, once per second. This listener handles updates that we receive from the system.
     */
    const onProcessListChanged = (err, response) => {
        const { value } = response;
        setProcessList(value);
    };
    useEffect(() => {
        Actions.initialize(() => {
            Store === null || Store === void 0 ? void 0 : Store.addListener({ field: "processList" }, onProcessListChanged);
        });
        return () => {
            Store === null || Store === void 0 ? void 0 : Store.removeListener({ field: "processList" }, onProcessListChanged);
        };
    }, []);
    if (!Store)
        return null;
    // statReducer is an array.reduce function that will sum all of the CPU/memory usage across the app.
    const totals = processList.length ? processList.reduce(statReducer) : EMPTY_TOTALS;
    return (React.createElement("div", null,
        React.createElement(Title, { title: title }),
        React.createElement("div", { className: "process-list-wrapper" },
            React.createElement(ListHeader, null),
            React.createElement("div", { className: "process-list" }, processList
                .filter((proc) => proc.visible)
                .map((proc) => (React.createElement(Process, { proc: proc, onClick: () => {
                    const list = { ...collapsedList };
                    const { processId } = proc.statistics;
                    if (processId)
                        list[processId] = !list[processId];
                    setCollapsedList(list);
                }, collapsed: !!collapsedList[proc.statistics.processId || 0], key: proc.statistics.processId }))))),
        React.createElement("div", { className: "bottom-section" },
            React.createElement("div", { className: "summary-statistics-wrapper" },
                React.createElement("div", { className: "summary-statistics-header" }, "Finsemble Total Usage"),
                React.createElement("div", { className: "summary-statistics" },
                    typeof totals.statistics.cpuUsage !== "undefined" && (React.createElement("div", { className: "summary-statistic" },
                        React.createElement("div", { className: "summary-statistic-label" }, "CPU"),
                        React.createElement("div", { className: "summary-statistic-number" }, `${roundDecimalToPrecision(totals.statistics.cpuUsage, 2)}%`))),
                    typeof totals.statistics.workingSetSize !== "undefined" && (React.createElement("div", { className: "summary-statistic" },
                        React.createElement("div", { className: "summary-statistic-label" }, "Memory"),
                        React.createElement("div", { className: "summary-statistic-number" }, bytesToSize(totals.statistics.workingSetSize)))))))));
};
/**
 * The window that shows performance data for applications running in Finsemble, such as CPU and memory usage.
 */
export const ProcessMonitor = () => {
    // Add styles to the process monitor window's body.
    useEffect(() => {
        document.body.classList.add("process-monitor");
    }, []);
    return React.createElement(ProcessMonitorBase, null);
};
//# sourceMappingURL=ProcessMonitor.js.map