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

const { onRender } = useScreen();

const { assets } = useAssets((a) => a.images.settings.topScreen.touchScreen);

onRender((ctx) => {
  ctx.globalAlpha = props.opacity;
  if (props.pressed === "touchScreen") {
    assets.touchScreenPressed.draw(ctx, props.x, props.y);
  } else if (props.isAnyOtherMenuOpen) {
    assets.touchScreenDisabled.draw(ctx, props.x, props.y);
  } else {
    assets.touchScreen.draw(ctx, props.x, props.y);
  }
});

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