<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    rect: [x: number, y: number, width: number, height: number];
    opacity?: number;
  }>(),
  {
    opacity: 1,
  },
);

const { assets } = useAssets();

const ANIMATION_SPEED = 0.25;

let [currentX, currentY, currentWidth, currentHeight] = props.rect;

useRender((ctx) => {
  const [targetX, targetY, targetWidth, targetHeight] = props.rect;
  const dx = targetX - currentX;
  const dy = targetY - currentY;
  const dw = targetWidth - currentWidth;
  const dh = targetHeight - currentHeight;

  if (
    Math.abs(dx) < 0.5 &&
    Math.abs(dy) < 0.5 &&
    Math.abs(dw) < 0.5 &&
    Math.abs(dh) < 0.5
  ) {
    [currentX, currentY, currentWidth, currentHeight] = props.rect;
  } else {
    currentX += dx * ANIMATION_SPEED;
    currentY += dy * ANIMATION_SPEED;
    currentWidth += dw * ANIMATION_SPEED;
    currentHeight += dh * ANIMATION_SPEED;
  }

  const x = Math.floor(currentX);
  const y = Math.floor(currentY);
  const w = Math.floor(currentWidth);
  const h = Math.floor(currentHeight);

  ctx.globalAlpha = props.opacity;

  ctx.drawImage(assets.home.bottomScreen.buttons.corner, x, y);

  ctx.save();
  ctx.scale(-1, 1);
  ctx.drawImage(assets.home.bottomScreen.buttons.corner, -(x + w), y);
  ctx.restore();

  ctx.save();
  ctx.scale(1, -1);
  ctx.drawImage(assets.home.bottomScreen.buttons.corner, x, -(y + h));
  ctx.restore();

  ctx.save();
  ctx.scale(-1, -1);
  ctx.drawImage(assets.home.bottomScreen.buttons.corner, -(x + w), -(y + h));
  ctx.restore();
});

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