import { App, Astal, Gdk, Gtk } from "astal/gtk3"
import Workspaces from "./Workspaces"
import Logo from "./Logo"
import Clock from "./Clock"
import { VolumeWidget } from "./Volume"
import { WifiWidget } from "./Wifi"
import { BatteryWidget } from "./Battery"
import { PowerWidget } from "./Power"

const RADIUS = 12

// paints the concave sliver below the bar at the screen edge: the r x r
// square minus the quarter disk where the wallpaper shows through
function Corner({ side }: { side: "left" | "right" }) {
    return (
        <drawingarea
            className="corner"
            widthRequest={RADIUS}
            heightRequest={RADIUS}
            halign={side === "left" ? Gtk.Align.START : Gtk.Align.END}
            onDraw={(self, cr) => {
                const w = self.get_allocated_width()
                const h = self.get_allocated_height()
                // bar color comes from the parent strip so the sliver gets the
                // same bar-bg + module-bg stack as the pills
                const bar = self
                    .get_parent()!
                    .get_style_context()
                    .get_color(Gtk.StateFlags.NORMAL)
                const mod = self
                    .get_style_context()
                    .get_color(Gtk.StateFlags.NORMAL)

                const trace = () => {
                    if (side === "left") {
                        cr.moveTo(0, 0)
                        cr.lineTo(w, 0)
                        cr.arcNegative(w, h, w, -Math.PI / 2, -Math.PI)
                    } else {
                        cr.moveTo(w, 0)
                        cr.lineTo(0, 0)
                        cr.arc(0, h, w, -Math.PI / 2, 0)
                    }
                    cr.closePath()
                }

                cr.setSourceRGBA(bar.red, bar.green, bar.blue, bar.alpha)
                trace()
                cr.fillPreserve()
                cr.setSourceRGBA(mod.red, mod.green, mod.blue, mod.alpha)
                cr.fill()
            }}
        />
    )
}

export default function Bar(gdkmonitor: Gdk.Monitor) {
    const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
    const volume = VolumeWidget(gdkmonitor)
    const wifi = WifiWidget(gdkmonitor)
    const battery = BatteryWidget(gdkmonitor)
    const power = PowerWidget(gdkmonitor)

    const right: Array<JSX.Element> = []
    if (wifi.button) right.push(wifi.button)
    right.push(volume.button)
    if (battery.button) right.push(battery.button)
    right.push(power.button)

    const popups: Array<JSX.Element> = []
    if (wifi.popup) popups.push(wifi.popup)
    popups.push(volume.popup)
    if (battery.popup) popups.push(battery.popup)
    popups.push(power.popup)

    return [
        (
            <window
                className="Bar"
                namespace="ags-bar"
                gdkmonitor={gdkmonitor}
                exclusivity={Astal.Exclusivity.EXCLUSIVE}
                anchor={TOP | LEFT | RIGHT}
                application={App}
            >
                <box vertical>
                    <centerbox className="bar">
                        <box
                            className="bar-left"
                            halign={Gtk.Align.START}
                            valign={Gtk.Align.FILL}
                        >
                            <Logo />
                            <box className="center">
                                <Workspaces />
                            </box>
                        </box>
                        <box
                            className="bar-center"
                            halign={Gtk.Align.CENTER}
                            valign={Gtk.Align.CENTER}
                        />
                        <box
                            className="bar-right"
                            halign={Gtk.Align.END}
                            valign={Gtk.Align.FILL}
                        >
                            {right}
                            <box className="clock last">
                                <Clock />
                            </box>
                        </box>
                    </centerbox>
                    <box className="bar-corners">
                        <Corner side="left" />
                        <box hexpand />
                        <Corner side="right" />
                    </box>
                </box>
            </window>
        ),
        ...popups,
    ]
}