<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    x: number;
    y: number;
    opacity?: number;
  }>(),
  {
    opacity: 1,
  },
);

const { onRender } = useScreen();

const settingsStore = useSettingsStore();
const menusContext = inject<{
  isSubmenuSelected: ComputedRef<boolean>;
  selectedSubmenuParent: ComputedRef<string | null>;
}>("menusContext")!;

const { assets } = useAssets();

// TODO: i don't like this
const isAnyOtherMenuOpen = computed(() => {
  if (settingsStore.currentSubMenu) {
    return !settingsStore.currentSubMenu.startsWith("touchScreen");
  }
  if (menusContext.isSubmenuSelected.value) {
    return menusContext.selectedSubmenuParent.value !== "touchScreen";
  }
  return false;
});

onRender((ctx) => {
  ctx.globalAlpha = props.opacity;
  if (isAnyOtherMenuOpen.value) {
    assets.images.settings.topScreen.touchScreen.touchScreenDisabled.draw(
      ctx,
      props.x,
      props.y,
    );
  } else {
    assets.images.settings.topScreen.touchScreen.touchScreen.draw(
      ctx,
      props.x,
      props.y,
    );
  }
});

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