<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
import SETTINGS_IMAGE from "/assets/images/settings/top-screen/settings.webp";
import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import CLOCK_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
import USER_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
import TOUCH_SCREEN_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";

const store = useSettingsStore();

const [
  notificationImage,
  settingsImage,
  optionsImage,
  clockImage,
  userImage,
  touchScreenImage,
  startUpImage,
  languageImage,
  gbaModeImage,
] = useImages(
  NOTIFICATION_IMAGE,
  SETTINGS_IMAGE,
  OPTIONS_IMAGE,
  CLOCK_IMAGE,
  USER_IMAGE,
  TOUCH_SCREEN_IMAGE,
  START_UP_IMAGE,
  LANGUAGE_IMAGE,
  GBA_MODE_IMAGE,
);

const activeMenu = computed(() => {
  if (!store.activeMenu) return null;

  if (/^options[A-Z]/.test(store.activeMenu)) {
    return { id: "options", image: optionsImage };
  }
  if (/^clock[A-Z]/.test(store.activeMenu)) {
    return { id: "clock", image: clockImage };
  }
  if (/^user[A-Z]/.test(store.activeMenu)) {
    return { id: "user", image: userImage };
  }
  if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
    return { id: "touchScreen", image: touchScreenImage };
  }

  return null;
});

const renderNotification = (
  ctx: CanvasRenderingContext2D,
  image: HTMLImageElement,
  title: string,
  description: string,
) => {
  ctx.drawImage(notificationImage!, 0, 0);
  ctx.drawImage(image, 2, 2);

  ctx.font = "10px NDS10";
  ctx.fillStyle = "#282828";
  ctx.fillText(title, 52, 13);

  ctx.fillStyle = "#fbfbfb";
  const lines = description.split("\n");
  const textY = lines.length === 1 ? 36 : 28;
  for (let i = 0; i < lines.length; i += 1) {
    ctx.fillText(lines[i]!, 52, textY + 14 * i);
  }
};

const notificationStack = computed(() => {
  const stack: Array<{ id: string; image: HTMLImageElement }> = [
    { id: "main", image: settingsImage! },
  ];

  if (activeMenu.value) {
    stack.push({ id: activeMenu.value.id, image: activeMenu.value.image! });
  }

  for (const view of store.navigationStack) {
    const menuMatch = view.match(/^(options|clock|user|touchScreen)(.+)$/);
    if (menuMatch) {
      const [, menu, submenu] = menuMatch;
      const submenuKey = submenu!.charAt(0).toLowerCase() + submenu!.slice(1);
      const imageMap: Record<string, HTMLImageElement> = {
        optionsStartUp: startUpImage!,
        optionsLanguage: languageImage!,
        optionsGbaMode: gbaModeImage!,
      };
      if (imageMap[view]) {
        stack.push({ id: `${menu}.${submenuKey}`, image: imageMap[view]! });
      }
    }
  }

  return stack;
});

useRender((ctx) => {
  const stackSize = notificationStack.value.length;

  ctx.translate(0, 144 - (stackSize - 1) * 16);

  for (let i = 0; i < stackSize; i++) {
    const notification = notificationStack.value[i]!;

    renderNotification(
      ctx,
      notification.image,
      $t(`settings.${notification.id}.title`),
      $t(`settings.${notification.id}.description`),
    );

    ctx.translate(0, 16);
  }
});

defineOptions({
  render: () => null,
});
</script>
