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 (
        <box>
            {percentage.as(p => <button hasFrame={false}>
                <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>)}
        </box>
    );
};