import { ImageLoader } from "~/utils/loadImages";

export class ContactTopScreen {
  private images = new ImageLoader({
    homeBackground: "/images/home/top-screen/background.webp",
    contactBackground: "/images/contact/top-screen/background.webp",
    leftBar: "/images/contact/top-screen/left-bar.webp",
    leftBarThings: "/images/contact/top-screen/left-bar-things.webp",
    notification: "/images/contact/bottom-screen/notification.webp",
    title: "/images/contact/top-screen/title.webp",
  });

  private notifications: string[] = [];
  private notificationsYOffset = 0;

  public pushNotification(message: string): void {
    this.notifications.push(message);
  }

  render(ctx: CanvasRenderingContext2D): void {
    if (!this.images.isReady) return;

    // backgrounds
    // NOTE: animate home background
    ctx.drawImage(this.images.require("homeBackground"), 0, 0);
    ctx.drawImage(this.images.require("contactBackground"), 0, 0);

    // left bar
    ctx.drawImage(this.images.require("leftBar"), 0, 0);
    ctx.drawImage(this.images.require("leftBarThings"), 0, 0);

    ctx.font = "10px NDS10";

    // notifications
    for (let i = this.notifications.length - 1; i >= 0; i--) {
      const index = this.notifications.length - 1 - i;
      const y = 169 - 24 * index + this.notificationsYOffset;
      if (y < -24) break;

      ctx.drawImage(this.images.require("notification"), 21, y);

      const content = this.notifications[i]!;
      ctx.fillStyle = content.includes("opened") ? "#00fbba" : "#e3f300";
      ctx.fillText(this.notifications[i]!, 27, y + 15);
    }

    // title
    ctx.drawImage(
      this.images.require("title"),
      21,
      169 - 24 * this.notifications.length + this.notificationsYOffset,
    );

    // notifications count (left bar)
    const MAX = 36;
    const MAX_VISIBLE = 8;

    let visibleNotifications = Math.min(this.notifications.length, MAX_VISIBLE);
    const extraActive =
      this.notificationsYOffset > 0 && this.notifications.length > MAX_VISIBLE;

    if (extraActive) {
      visibleNotifications += 1;
    }

    ctx.fillStyle = "#415969";
    for (let i = 0; i < visibleNotifications; i++) {
      ctx.fillRect(3, 161 - i * 4, 12, 2);
    }

    ctx.fillStyle = "#b2c3db";
    const startY = 161 - visibleNotifications * 4;
    const top = MAX - MAX_VISIBLE - (extraActive ? 1 : 0);
    for (
      let i = 0;
      i < this.notifications.length - visibleNotifications && i < top;
      i++
    ) {
      if (i === top - 1) {
        ctx.fillRect(7, startY - i * 4, 4, 2);
      } else if (i === top - 2) {
        ctx.fillRect(5, startY - i * 4, 8, 2);
      } else {
        ctx.fillRect(3, startY - i * 4, 12, 2);
      }
    }
  }
}