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

const { onRender } = useScreen();
const { assets } = useAssets();

onRender((ctx) => {
  const [x, y, w, h] = props.rect;

  ctx.globalAlpha = props.opacity;

  // top-left corner
  assets.images.common.selectorCornersSheet.draw(ctx, x, y, { colored: true });

  // top-right corner
  ctx.save();
  ctx.scale(-1, 1);
  assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), y, {
    colored: true,
  });
  ctx.restore();

  // bottom-left corner
  ctx.save();
  ctx.scale(1, -1);
  assets.images.common.selectorCornersSheet.draw(ctx, x, -(y + h), {
    colored: true,
  });
  ctx.restore();

  // bottom-right corner
  ctx.save();
  ctx.scale(-1, -1);
  assets.images.common.selectorCornersSheet.draw(ctx, -(x + w), -(y + h), {
    colored: true,
  });
  ctx.restore();
}, 40);

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