<script setup lang="ts">
import TOP_BAR_IMAGE from "/assets/images/contact/bottom-screen/top-bar.png";
import BOTTOM_BAR_IMAGE from "/assets/images/contact/bottom-screen/bottom-bar.png";
import BOTTOM_BAR_OK_IMAGE from "/assets/images/contact/bottom-screen/ok-button.png";

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

const store = useContactStore();

const [topBarImage, bottomBarImage, bottomBarOkImage] = useImages(
  TOP_BAR_IMAGE,
  BOTTOM_BAR_IMAGE,
  BOTTOM_BAR_OK_IMAGE,
);

useRender((ctx) => {
  ctx.globalAlpha = store.isIntro
    ? store.intro.stage3Opacity
    : store.outro.stage2Opacity;

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

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

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

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