import { execAsync } from "astal";
import { Gtk } from "astal/gtk4";
import sysinfo from "../sysinfo";

const info = () => {
    return (
        <box vertical>
            <label
                label={"System Information"}
                cssClasses={["title-2"]}
            ></label>
            <Gtk.Separator marginTop={5} marginBottom={10}></Gtk.Separator>
            <label
                vexpand
                halign={Gtk.Align.START}
                hexpand
                label={sysinfo.ramUsed(used => {
                    return "RAM: " + used + ` (${sysinfo.ramUtil.get()}%)`;
                })}
            ></label>
            <label
                label={sysinfo.systemStats(stats => {
                    return `CPU: ${stats.cpuTemp}, ${stats.cpuClk}
GPU: ${stats.gpuTemp}, ${stats.gpuClk} (${stats.vram} / ${stats.availableVRAM})
Kernel: ${stats.kernel}`;
                })}
            ></label>
            <Gtk.Separator marginTop={10}></Gtk.Separator>
            <button
                onClicked={() => execAsync(`/bin/sh -c "kitty --hold fish -c 'fastfetch'"`)}
                child={
                    <label label={"View FastFetch"}></label>
                }></button>
        </box>
    );
};

const SystemInformationPanel = () => {
    const popover = new Gtk.Popover();

    popover.set_child(info());

    return popover;
};


const panel = SystemInformationPanel();

const SystemInfo = () => {
    sysinfo.startSysInfoFetcher();

    const openSysInfo = async () => {
        panel.popup();
        sysinfo.refreshStats();
    };

    if (sysinfo.enabled) {
        return (
            <button
                onClicked={() => openSysInfo()}
                child={
                    <box tooltipText={sysinfo.ramUsed(v => v)}>
                        <box
                            cssClasses={[ 'quick-view-symbol' ]}
                        >
                            <image
                                iconName={"power-profile-performance-symbolic"}
                                marginEnd={1}
                            ></image>
                            <label
                                label={sysinfo.cpuUtil(util => util)}
                                marginEnd={5}
                            ></label>
                        </box>
                        <box
                            cssClasses={[ 'quick-view-symbol' ]}
                        >
                            <image iconName={"histogram-symbolic"}></image>
                            <label label={sysinfo.ramUtil(util => util)}></label>
                        </box>
                        <box
                            cssClasses={[ 'quick-view-symbol' ]}
                        >
                            <image iconName={"show-gpu-effects-symbolic"}></image>
                            <label label={sysinfo.gpuUtil(util => util)}></label>
                        </box>
                        {panel}
                    </box>
                }
                cssClasses={["bar-button"]}
            ></button>
        );
    } else {
        return <image iconName={"action-unavailable-symbolic"}></image>;
    }
};

export default {
    SystemInfo,
    panel,
};