<script setup lang="ts">
import MENU_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen-disabled.png";

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

const settingsStore = useSettingsStore();

const [menuImage, menuDisabledImage] = useImages(
  MENU_IMAGE,
  MENU_DISABLED_IMAGE,
);

const isAnyOtherMenuOpen = computed(() =>
  settingsStore.isAnyOtherMenuOpen("touchScreen"),
);

useRender((ctx) => {
  if (isAnyOtherMenuOpen.value) {
    ctx.drawImage(menuDisabledImage!, props.x, props.y);
  } else {
    ctx.drawImage(menuImage!, props.x, props.y);
  }
});

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