import { Astal, App, Gtk } from "astal/gtk3";
import Battery from "gi://AstalBattery";
import { bind, Variable } from "astal";
import { cycles_count, health, voltage } from "./helpers.ts";

const BatteryMenu = () => {
  const { TOP, RIGHT } = Astal.WindowAnchor;
  const { START, END, CENTER } = Gtk.Align;
  const bat = Battery.get_default();
  const batcycles = Variable<string>("").poll(5000, () => cycles_count());
  const bathealth = Variable<string>("").poll(5000, () => health());
  const batvoltage = Variable<string>("").poll(5000, () => voltage());

  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={bathealth()} />
          </box>
          <box>
            <label
              className="BatteryInfoTableRowTitle"
              hexpand
              halign={START}
              label="Charge cycles:"
            />
            <label hexpand halign={END} label={batcycles()} />
          </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={batvoltage()} />
          </box>
        </box>
      </box>
    </window>
  );
};

export default BatteryMenu;