import app from "ags/gtk4/app";
import { Astal, Gtk } from "ags/gtk4";
import AstalNotifd from "gi://AstalNotifd";
import Notification from "./Notification";
import { createBinding, For, createState, onCleanup } from "ags";

export default function NotificationPopups() {
    const monitors = createBinding(app, "monitors");

    const notifd = AstalNotifd.get_default();

    const [notifications, setNotifications] = createState(
        new Array<AstalNotifd.Notification>(),
    );

    const notifiedHandler = notifd.connect("notified", (_, id, replaced) => {
        const notification = notifd.get_notification(id);

        if (replaced && notifications.get().some((n) => n.id === id)) {
            setNotifications((ns) => ns.map((n) => (n.id === id ? notification : n)));
        } else {
            setNotifications((ns) => [notification, ...ns]);
        }
    });

    const resolvedHandler = notifd.connect("resolved", (_, id) => {
        setNotifications((ns) => ns.filter((n) => n.id !== id));
    });

    // technically, we don't need to cleanup because in this example this is a root component
    // and this cleanup function is only called when the program exits, but exiting will cleanup either way
    // but it's here to remind you that you should not forget to cleanup signal connections
    onCleanup(() => {
        notifd.disconnect(notifiedHandler);
        notifd.disconnect(resolvedHandler);
    });

    return (
        <For each={monitors} cleanup={(win) => (win as Gtk.Window).destroy()}>
            {(monitor) => (
                <window
                    class="NotificationPopups"
                    gdkmonitor={monitor}
                    visible={notifications((ns) => ns.length > 0)}
                    anchor={Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT}
                >
                    <box orientation={Gtk.Orientation.VERTICAL}>
                        <For each={notifications}>
                            {(notification) => (
                                <Notification
                                    notification={notification}
                                    onHoverLost={() =>
                                        setNotifications((ns) =>
                                            ns.filter((n) => n.id !== notification.id),
                                        )
                                    }
                                />
                            )}
                        </For>
                    </box>
                </window>
            )}
        </For>
    );
}