import { bind } from "astal";
import Battery from "gi://AstalBattery";
import { close_all_menus } from "../../utils/windows";
import { App } from "astal/gtk3";

export default function BatteryLevel() {
  const bat = Battery.get_default();

  return (
    <button
      onClicked={() => {
        close_all_menus("batterymenu");
        App.toggle_window("batterymenu");
      }}
      className="Battery"
      // visible={true}
      visible={bind(bat, "isPresent")}
    >
      <box>
        <icon icon={bind(bat, "batteryIconName")} />
        <label
          label={bind(bat, "percentage").as((p) => `${Math.floor(p * 100)} %`)}
        />
      </box>
    </button>
  );
}