import { Gtk, Widget } from "astal/gtk3";
import { TileNetwork } from "./tiles/Network";
import { TileBluetooth } from "./tiles/Bluetooth";
import { TileDND } from "./tiles/DoNotDisturb";
import { TileRecording } from "./tiles/Recording";
import { TileNightLight } from "./tiles/NightLight";
import { Pages } from "./Pages";

export const tileList: Array<() => Gtk.Widget> = [
    TileNetwork,
    TileBluetooth,
    TileRecording,
    TileDND,
    TileNightLight
];

export let TilesPages: (Pages|null) = null;

export function Tiles(): Gtk.Widget {
    const tilesFlowBox: Gtk.FlowBox = new Gtk.FlowBox({
        visible: true,
        orientation: Gtk.Orientation.HORIZONTAL,
        rowSpacing: 6,
        columnSpacing: 6,
        minChildrenPerLine: 2,
        maxChildrenPerLine: 2,
        expand: true,
        homogeneous: true,
    } as Gtk.FlowBox.ConstructorProps);

    tileList.map((item: (() => Gtk.Widget)) => {
        tilesFlowBox.insert(item(), -1);

        const children = tilesFlowBox.get_children();
        children[children.length-1]!.set_can_focus(false);
    });

    return new Widget.Box({
        className: "tiles-container",
        orientation: Gtk.Orientation.VERTICAL,
        onDestroy: () => {
            TilesPages?.close();
            TilesPages = null;
        },
        setup: (box) => {
            if(!TilesPages) TilesPages = new Pages({
                className: "tile-pages"
            });

            box.set_children([
                tilesFlowBox,
                TilesPages!
            ]);
        }
    } as Widget.BoxProps);
}