import { Astal, Gtk } from "ags/gtk4";
import app from "ags/gtk4/app";
import LLMChat from "./LLMChat";
import WeatherWidget from "./WeatherWidget";
import EmailList from "./EmailList";
import RSSList from "./RSSList";

export default function Overlay() {
    const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;

    return (
        <window
            visible={false}
            focusable={true}
            name="overlay"
            class="Overlay"
            layer={Astal.Layer.OVERLAY}
            anchor={TOP | LEFT | RIGHT | BOTTOM}
            application={app}
            exclusivity={Astal.Exclusivity.NORMAL}
            keymode={Astal.Keymode.EXCLUSIVE}
        >
            <box halign={Gtk.Align.CENTER} hexpand={true} vexpand={true}>
                <box 
                    cssClasses={["container"]} 
                    orientation={Gtk.Orientation.VERTICAL} 
                    spacing={12} 
                    widthRequest={1000}
                    vexpand={true}
                >
                    <box orientation={Gtk.Orientation.HORIZONTAL} spacing={12} hexpand>
                        <WeatherWidget />
                    </box>

                    <box orientation={Gtk.Orientation.HORIZONTAL} spacing={12} hexpand vexpand={true} heightRequest={300}>
                        <EmailList/>
                        <RSSList/>
                    </box>

                    <box orientation={Gtk.Orientation.HORIZONTAL} hexpand vexpand={true} heightRequest={400}>
                        <LLMChat />
                    </box>
                </box>
            </box>
        </window>
    );
}