import {
    Gtk
} from 'astal/gtk4';
import {
    execAsync
} from 'astal';
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={'memory'}></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,
};