<script setup lang="ts">
import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.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";

const store = useSettingsStore();

const [
  notificationImage,
  titleImage,
  optionsImage,
  clockImage,
  userImage,
  touchScreenImage,
] = useImages(
  NOTIFICATION_IMAGE,
  TITLE_IMAGE,
  OPTIONS_IMAGE,
  CLOCK_IMAGE,
  USER_IMAGE,
  TOUCH_SCREEN_IMAGE,
);

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

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

  return null;
});

useRender((ctx) => {
  ctx.translate(0, activeMenu.value ? 144 - 16 : 144);

  ctx.drawImage(titleImage!, 0, 0);

  if (activeMenu.value) {
    ctx.translate(0, 16);

    ctx.drawImage(notificationImage!, 0, 0);
    ctx.drawImage(activeMenu.value.image!, 2, 2);

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

    ctx.fillStyle = "#fbfbfb";
    ctx.fillText("TODO", 52, 36);
  }
});

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