import AstalBattery from "gi://AstalBattery"
import { createBinding, createDerivedBinding } from "ags"

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

  const percentage = createBinding(bat, "percentage")
  const charging = createBinding(bat, "charging")

  const text = createDerivedBinding(
    [percentage, charging],
    (p: number, isCharging: boolean) => {
      const pct = Math.round(p * 100)
      let icon = ""
      if (isCharging) icon = "󰂄"
      else if (pct > 90) icon = "󰁹"
      else if (pct > 70) icon = "󰂁"
      else if (pct > 50) icon = "󰁿"
      else if (pct > 30) icon = "󰁽"
      else if (pct > 10) icon = "󰁻"
      else icon = "󰂃"
      return `${icon} ${pct}%`
    },
  )

  const cls = createDerivedBinding(
    [percentage, charging],
    (p: number, isCharging: boolean) => {
      const pct = Math.round(p * 100)
      if (isCharging) return "battery charging"
      if (pct <= 10) return "battery low"
      if (pct <= 20) return "battery warning"
      return "battery"
    },
  )

  return <label class={cls} label={text} />
}