<script setup lang="ts">
const props = defineProps<{
  yOffset: number;
  opacity?: number;
  bLabel: string;
  aLabel: string;
}>();

const emit = defineEmits<{
  activateA: [];
  activateB: [];
}>();

const { onRender, onClick } = useScreen();

const { assets } = useAssets();

const BUTTON_WIDTH = assets.images.common.button.rect.width;
const BUTTON_HEIGHT = assets.images.common.button.rect.height;

const B_BUTTON: Rect = [31, 172, BUTTON_WIDTH, BUTTON_HEIGHT];
const A_BUTTON: Rect = [144, 172, BUTTON_WIDTH, BUTTON_HEIGHT];

onRender((ctx) => {
  ctx.globalAlpha = props.opacity ?? 1;
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#010101";

  ctx.translate(0, props.yOffset);

  const drawButton = (icon: string, text: string, x: number) => {
    assets.images.common.button.draw(ctx, x, 172);

    const label = `${icon} ${text}`;
    fillTextHCentered(ctx, label, x, 185, BUTTON_WIDTH);
  };

  drawButton(ICONS.B, props.bLabel, 31);
  drawButton(ICONS.A, props.aLabel, 144);
}, 60);

onClick((x, y) => {
  if (props.yOffset !== 0) return;
  if (rectContains(B_BUTTON, [x, y])) {
    emit("activateB");
  } else if (rectContains(A_BUTTON, [x, y])) {
    emit("activateA");
  }
});

useKeyDown((key) => {
  if (props.yOffset !== 0) return;
  switch (key) {
    case "NDS_START":
    case "NDS_A":
      emit("activateA");
      break;

    case "NDS_B":
      emit("activateB");
      break;
  }
});

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