import { Astal, App, Gtk } from "astal/gtk3";
import Battery from "gi://AstalBattery";
import { bind } from "astal";

const BatteryMenu = () => {
  const { TOP, RIGHT } = Astal.WindowAnchor;
  const { START, END } = Gtk.Align;
  const bat = Battery.get_default();
  console.log(
    bat.charging,
    bat.capacity,
    bat.energyFull,
    bat.energy_full_design,
  );
  return (
    <window
      anchor={TOP | RIGHT}
      name="batterymenu"
      className="Batterymenu"
      application={App}
      visible={false}
    >
      <box vertical className="BatteryMainBox">
        <box className="Top">
          <icon icon={bind(bat, "batteryIconName")} />
          <box vertical>
            <label
              className="BatteryTopTitle"
              label={bind(bat, "percentage").as(
                (p) => `Battery ${Math.floor(p * 100)} %`,
              )}
            />
          </box>
        </box>
        <box vertical className="BatteryInfoTable">
          <box>
            <label
              className="BatteryInfoTableRowTitle"
              hexpand
              halign={START}
              label="Status:"
            />
            <label
              hexpand
              halign={END}
              label={bind(bat, "charging").as((p) =>
                p ? "CHARGING" : "PENDING_CHARGE",
              )}
            />
          </box>
          <box>
            <label
              className="BatteryInfoTableRowTitle"
              hexpand
              halign={START}
              label="Health:"
            />
            <label hexpand halign={END} label="92.5 %" />
          </box>
          <box>
            <label
              className="BatteryInfoTableRowTitle"
              hexpand
              halign={START}
              label="Charge cycles:"
            />
            <label hexpand halign={END} label="325" />
          </box>
          <box>
            <label
              className="BatteryInfoTableRowTitle"
              hexpand
              halign={START}
              label="Power draw:"
            />
            <label hexpand halign={END} label="0.0 W" />
          </box>
          <box>
            <label
              className="BatteryInfoTableRowTitle"
              hexpand
              halign={START}
              label="Voltage:"
            />
            <label hexpand halign={END} label="12.1 V" />
          </box>
        </box>
      </box>
    </window>
  );
};

export default BatteryMenu;