import { execAsync, Variable, bind } from "astal"

// no astal.brightness lib in nixpkgs: poll brightnessctl for the current
// level as a 0..1 fraction, pushing changes through brightnessctl set
const percent = Variable(0).poll(
    2000,
    ["sh", "-c", "echo $(( $(brightnessctl get) * 100 / $(brightnessctl max) ))"],
    (out) => parseInt(out) / 100,
)

export function BrightnessRow() {
    return (
        <box className="qs-row">
            <button className="qs-toggle">
                <icon icon="display-brightness-symbolic" />
            </button>
            <slider
                className="vol-slider"
                hexpand
                value={bind(percent)}
                onDragged={(self) => {
                    const pct = Math.round(self.value * 100)
                    percent.set(pct / 100)
                    execAsync(["brightnessctl", "set", `${pct}%`]).catch(
                        console.error,
                    )
                }}
            />
        </box>
    )
}