import { Controller, OnStart } from "@flamework/core";
import React from "@rbxts/react";
import { createRoot } from "@rbxts/react-roblox";
import { Players } from "@rbxts/services";
import { Trove } from "@rbxts/trove";
import { AdminMessageCard } from "client/ui/admin-message";
import { AdminMessage, AdminMessageEvents } from "shared/admin-message";

@Controller()
export class AdminMessageController implements OnStart {
  private readonly trove = new Trove();
  private readonly events = AdminMessageEvents.createClient({});

  public onStart(): void {
    const folder = new Instance("Folder");
    folder.Name = "AdminMessageRoot";
    folder.Parent = Players.LocalPlayer.WaitForChild("PlayerGui");
    const root = createRoot(folder);
    this.trove.add(folder);
    this.trove.add(() => root.unmount());
    const queue: AdminMessage[] = [];
    let running = false;
    let alive = true;
    this.trove.add(() => {
      alive = false;
    });
    this.trove.add(
      this.events.adminMessage.connect((message) => {
        if (queue.size() >= 8) queue.shift();
        queue.push(message);
        if (running) return;
        running = true;
        task.spawn(() => {
          while (alive && queue.size() > 0) {
            const current = queue.shift()!;
            root.render(<AdminMessageCard key={current.id} message={current} />);
            task.wait(10);
          }
          if (alive) root.render(undefined);
          running = false;
        });
      }),
    );
    this.trove.attachToInstance(script);
  }
}