import { ImageLoader } from "../../../utils/loadImages";
import { ButtonNavigation } from "../../../utils/buttonNavigation";
import { ButtonSelector } from "../../../utils/buttonSelector";
import type { ScreenContext } from "../../../screen";
import { ContactScreen } from "../../contact";

type HomeButton = "projects" | "contact" | "downloadPlay" | "settings";

export class HomeBottomScreen {
  private images = new ImageLoader({
    background: "/images/home/bottom-screen/background.webp",
    game: "/images/home/bottom-screen/buttons/game.webp",
    contact: "/images/home/bottom-screen/buttons/contact.webp",
    downloadPlay: "/images/home/bottom-screen/buttons/downloadPlay.webp",
    settings: "/images/home/bottom-screen/buttons/settings.webp",
  });

  private navigation: ButtonNavigation<HomeButton>;
  private selector = new ButtonSelector([31, 23, 193, 49]);

  constructor(context: ScreenContext) {
    this.navigation = new ButtonNavigation<HomeButton>({
      buttons: {
        projects: [31, 23, 193, 49],
        contact: [31, 71, 97, 49],
        downloadPlay: [127, 71, 97, 49],
        settings: [112, 167, 31, 26],
      },
      initialButton: "projects",
      navigation: {
        projects: {
          down: "last",
          left: "contact",
          right: "downloadPlay",
          horizontalMode: "preview",
        },
        contact: {
          up: "projects",
          right: "downloadPlay",
          down: "settings",
        },
        downloadPlay: {
          up: "projects",
          left: "contact",
          down: "settings",
        },
        settings: {
          up: "last",
        },
      },
      onButtonClick: (button) => {
        if (button === "contact") {
          context.navigate(new ContactScreen(context));
        }
      },
    });
  }

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

    // background
    ctx.drawImage(this.images.require("background"), 0, 0);

    // buttons
    ctx.drawImage(this.images.require("game"), 33, 25);
    ctx.drawImage(this.images.require("contact"), 32, 72);
    ctx.drawImage(this.images.require("downloadPlay"), 128, 72);
    ctx.drawImage(this.images.require("settings"), 117, 170);

    // selector
    this.selector.render(ctx, this.navigation.getSelectorPosition());
  }

  handleTouch(x: number, y: number): void {
    this.navigation.handleTouch(x, y);
  }

  destroy(): void {
    this.navigation.destroy();
  }
}