import { bind } from "astal";
import Battery from "gi://AstalBattery";
import { Gtk } from "astal/gtk4";

export const BatteryBox = () => {
    const battery = Battery.get_default();
    const batteryEnergy = (energyRate: number) => {
        return energyRate > 0.1 ? `${Math.round(energyRate * 10) / 10} W ` : "";
    };
    return (
        <box
            cssClasses={["battery-info"]}
            visible={bind(battery, "isBattery")}
        >
            <box cssClasses={["battery-box"]}>
                <image
                    iconName={bind(battery, "batteryIconName")}
                    tooltipText={bind(battery, "energyRate").as(er =>
                        batteryEnergy(er),
                    )}
                />
                <label
                    label={bind(battery, "percentage").as(
                        p => ` ${Math.round(p * 100)}%`,
                    )}
                />
                <label
                    cssClasses={["time"]}
                    hexpand={true}
                    halign={Gtk.Align.END}
                    visible={bind(battery, "charging").as(c => !c)}
                    label={bind(battery, "timeToEmpty").as(t => toTime(t))}
                />
            </box>
        </box>
    );
};

const toTime = (time: number) => {
    const MINUTE = 60;
    const HOUR = MINUTE * 60;

    if (time > 24 * HOUR) return "";

    const hours = Math.round(time / HOUR);
    const minutes = Math.round((time - hours * HOUR) / MINUTE);

    const hoursDisplay = hours > 0 ? `${hours}h ` : "";
    const minutesDisplay = minutes > 0 ? `${minutes}m ` : "";

    return `${hoursDisplay}${minutesDisplay}`;
};