<script setup lang="ts">
import Buttons from "./Buttons.vue";

const { assets } = useAssets();
const { close, state } = useConfirmationModal();

const BG_WIDTH = assets.common.confirmationModal.width;
const BG_HEIGHT = assets.common.confirmationModal.height;
const BG_X = Math.floor((SCREEN_WIDTH - BG_WIDTH) / 2);
const BG_Y = Math.floor((SCREEN_HEIGHT - BG_HEIGHT) / 2);

const TEXT_Y = BG_Y + Math.floor(BG_HEIGHT / 2) - 8 - 16 + 2 + 2;

const BOTTOM_BAR_HEIGHT = 24;
const CLIP_HEIGHT = SCREEN_HEIGHT - BOTTOM_BAR_HEIGHT;

const handleActivateA = () => {
  state.value.onConfirm?.();
  close();
};

const handleActivateB = () => {
  close();
};

useRender((ctx) => {
  if (!state.value.isVisible) return;

  ctx.beginPath();
  ctx.rect(0, 0, SCREEN_WIDTH, CLIP_HEIGHT);
  ctx.clip();

  ctx.translate(0, state.value.offsetY);

  ctx.drawImage(assets.common.confirmationModal, BG_X, BG_Y);

  ctx.font = "16px Pokemon DP Pro";
  ctx.textBaseline = "top";
  ctx.fillStyle = "#ffffff";

  fillTextCentered(ctx, state.value.text, BG_X, TEXT_Y, BG_WIDTH);
});

onUnmounted(() => {
  close();
});
</script>

<template>
  <Buttons
    v-if="state.showButtons"
    :y-offset="state.modalButtonsYOffset"
    b-label="Cancel"
    a-label="Confirm"
    @activate-a="handleActivateA"
    @activate-b="handleActivateB"
  />
</template>
