<script setup lang="ts">
const props = defineProps<{
  okLabel: "Copy" | "Open";
}>();

const store = useContactStore();

const topBarImage = useTemplateRef("topBarImage");
const bottomBarImage = useTemplateRef("bottomBarImage");
const bottomBarOkImage = useTemplateRef("bottomBarOkImage");

useRender((ctx) => {
  if (!topBarImage.value || !bottomBarImage.value || !bottomBarOkImage.value)
    return;

  ctx.globalAlpha = store.isIntro ? store.intro.stage3Opacity : 1;

  // top bar
  ctx.drawImage(topBarImage.value, 0, store.isIntro ? store.intro.topBarY : 0);

  // bottom bar
  ctx.translate(0, store.isIntro ? store.intro.bottomBarY : SCREEN_HEIGHT - 24);
  ctx.drawImage(bottomBarImage.value, 0, 0);

  ctx.drawImage(bottomBarOkImage.value, 144, 4);
  ctx.font = "10px NDS10";
  ctx.fillStyle = "#000000";
  ctx.fillText(props.okLabel, 144 + 35, 4 + 13);
});
</script>

<template>
  <img
    ref="topBarImage"
    src="/assets/images/contact/bottom-screen/top-bar.png"
    hidden
  />
  <img
    ref="bottomBarImage"
    src="/assets/images/contact/bottom-screen/bottom-bar.png"
    hidden
  />
  <img
    ref="bottomBarOkImage"
    src="/assets/images/contact/bottom-screen/ok-button.png"
    hidden
  />
</template>
