import React from "react";
import { Actions } from "../stores/ProcessMonitorStore";
import { STATISTICS, HIGH_CPU, HIGH_MEMORY_USAGE, MODERATE_CPU_USAGE, MODERATE_MEMORY_USAGE, TO_MB, } from "../constants";
import { bytesToSize, roundDecimalToPrecision } from "../helpers";
import { FinsembleIcon } from "../../common/FinsembleIcon";
/**
 * Given a number, will return modifier classes that change the background. High usage === red. Moderate === orange.
 */
function getClassesForStat(number, statType) {
    let classes = "statistic", high_comparison = HIGH_MEMORY_USAGE * TO_MB, moderate_comparison = MODERATE_MEMORY_USAGE * TO_MB;
    if (typeof number === "undefined") {
        return classes;
    }
    if (statType === "CPU") {
        ((high_comparison = HIGH_CPU), (moderate_comparison = MODERATE_CPU_USAGE));
    }
    if (number > high_comparison) {
        classes = `${classes} high-usage`;
    }
    else if (number > moderate_comparison) {
        classes = `${classes} moderate-usage`;
    }
    return classes;
}
/**
 * Outputs something nice. 102423465243 outputs whatever that number is in KB/MB/GB.
 * 0.35123 will output 0.35% for CPU.
 */
function prettyPrint(number, statType) {
    if (typeof number === "undefined") {
        return "";
    }
    if (statType === "CPU") {
        //make it a percent.
        return `${roundDecimalToPrecision(number, 2)}%`;
    }
    else if (statType !== "PID") {
        return bytesToSize(number);
    }
    else {
        return number;
    }
}
const ProcessStatistics = (props) => {
    const { processId, webContents } = props.stats;
    const displayName = props.stats.name;
    const collapseIndicator = props.collapsed ? (React.createElement(FinsembleIcon, { icon: "chevron-down" })) : (React.createElement(FinsembleIcon, { icon: "chevron-up" }));
    const className = `process-name${props.collapsible ? " process-name-collapsible" : ""}`;
    return (React.createElement("div", { className: "process-row" },
        React.createElement("div", { className: className, onClick: props.onClick },
            displayName,
            " ",
            props.collapsible && collapseIndicator),
        React.createElement("div", { className: "process-statistics" },
            STATISTICS.map((field, i) => (React.createElement("div", { key: i, className: getClassesForStat(props.stats[field.value], field.label) }, prettyPrint(props.stats[field.value], field.label)))),
            React.createElement("div", { className: "statistic process-actions" }, props.stats.type === "Tab" && processId ? (React.createElement("div", { className: " terminate fsbl-button-negative process-action", onClick: () => {
                    Actions.terminateProcess(webContents);
                }, tabIndex: 0, role: "button", onKeyDown: (e) => {
                    if (e.key === "Enter" || e.key === " ") {
                        Actions.terminateProcess(webContents);
                    }
                } }, "Terminate")) : null))));
};
export default ProcessStatistics;
//# sourceMappingURL=ProcessStatistics.js.map