<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
import MENU_ACTIVE_IMAGE from "/assets/images/settings/top-screen/options/options-active.png";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/options/options-disabled.png";
import GBA_MODE_IMAGE from "/assets/images/settings/top-screen/options/gba-mode.webp";
import LANGUAGE_IMAGE from "/assets/images/settings/top-screen/options/language.webp";
import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.webp";

const props = defineProps<{
  x: number;
  y: number;
  isOpen: boolean;
  isAnyOtherMenuOpen: boolean;
}>();

const [
  menuImage,
  menuActiveImage,
  menuDisabledImage,
  gbaModeImage,
  languageImage,
  startUpImage,
] = useImages(
  MENU_IMAGE,
  MENU_ACTIVE_IMAGE,
  MENU_DISABLED_IMAGE,
  GBA_MODE_IMAGE,
  LANGUAGE_IMAGE,
  START_UP_IMAGE,
);

const animation = useMenuAnimation(toRef(() => props.isOpen));

useRender((ctx) => {
  ctx.translate(props.x, props.y);

  if (props.isOpen || animation.playing) {
    ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
    ctx.drawImage(
      gbaModeImage!,
      48 - animation.stage2Offset,
      -48 + animation.stage1Offset,
    );
    ctx.drawImage(
      startUpImage!,
      0,
      -96 + animation.stage2Offset + animation.stage1Offset,
    );

    ctx.drawImage(menuActiveImage!, 0, 0);
  } else if (props.isAnyOtherMenuOpen) {
    ctx.drawImage(menuDisabledImage!, 0, 0);
  } else {
    ctx.drawImage(menuImage!, 0, 0);
  }
});

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