import { App, Gdk } from "astal/gtk4";
import { bind } from "astal";

import Battery from "gi://AstalBattery";

import { getBatteryIcon } from "@/lib/icons";
import { openOnButton } from "@/lib/utils";

export function BatteryInfo({ battery }: { battery: Battery.Device }) {
    const percentage = bind(battery, "percentage").as(p => Math.floor(p * 100));
    const charging = bind(battery, "charging");

    return (
        <button hasFrame={false}>
            {percentage.as(p => <box onButtonPressed={(_self, event) =>
                openOnButton(event, Gdk.BUTTON_PRIMARY)
                    (() => App.toggle_window("battery_info"))
            }>
                <label>{percentage.as(p => `${p}%`)}</label>
                <image iconName={getBatteryIcon(p, charging)} />
            </box>)}
        </button>
    );
};