<script setup lang="ts">
import gsap from "gsap";

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];

const LABEL_CHANGE_OFFSET = 20;
const LABEL_CHANGE_DURATION = 0.167;
const LABEL_CHANGE_PAUSE = 0.08;

let bButtonOffsetY = 0;
let aButtonOffsetY = 0;
let displayedBLabel = props.bLabel;
let displayedALabel = props.aLabel;

const animateLabelChange = (
  setter: (v: number) => void,
  setLabel: (label: string) => void,
  newLabel: string,
) => {
  const target = { v: 0 };
  gsap
    .timeline()
    .to(target, {
      v: LABEL_CHANGE_OFFSET,
      duration: LABEL_CHANGE_DURATION,
      ease: "none",
      onUpdate: () => setter(target.v),
      onComplete: () => setLabel(newLabel),
    })
    .to(target, {
      v: 0,
      duration: LABEL_CHANGE_DURATION,
      delay: LABEL_CHANGE_PAUSE,
      ease: "none",
      onUpdate: () => setter(target.v),
    });
};

watch(
  () => props.bLabel,
  (newLabel) =>
    animateLabelChange(
      (v) => (bButtonOffsetY = v),
      (l) => (displayedBLabel = l),
      newLabel,
    ),
);

watch(
  () => props.aLabel,
  (newLabel) =>
    animateLabelChange(
      (v) => (aButtonOffsetY = v),
      (l) => (displayedALabel = l),
      newLabel,
    ),
);

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,
    buttonOffsetY: number,
  ) => {
    ctx.save();
    ctx.translate(0, buttonOffsetY);
    assets.images.common.button.draw(ctx, x, 172);

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

  drawButton(ICONS.B, displayedBLabel, 31, bButtonOffsetY);
  drawButton(ICONS.A, displayedALabel, 144, aButtonOffsetY);
}, 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>
