<script setup lang="ts">
import { onMounted, onUpdated, ref } from "vue";
import { ONE_MM } from "../const";

const props = defineProps<{
  vMargin: number;
  hMargin: number;
  imageWidth: number;
  imageHeight: number;
}>();

const ctx = ref<null | CanvasRenderingContext2D>(null);

const clearCanvas = () => {
  const { imageWidth, imageHeight } = props;

  if (ctx.value) {
    ctx.value.clearRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
  }
};

const render = () => {
  const { vMargin, hMargin, imageWidth, imageHeight } = props;

  clearCanvas();

  if (ctx.value) {
    for (let i = 1; i < 100; i++) {
      const y = i * hMargin * ONE_MM;
      ctx.value.moveTo(0, y);
      ctx.value.lineTo(imageWidth * ONE_MM, y);
      ctx.value.stroke();
    }

    for (let i = 1; i < 100; i++) {
      const x = i * vMargin * ONE_MM;
      ctx.value.moveTo(x, 0);
      ctx.value.lineTo(x, imageHeight * ONE_MM);
      ctx.value.stroke();
    }
  }
};

onMounted(() => {
  const canvas = document.getElementById("canvas") as HTMLCanvasElement;

  if (canvas) {
    ctx.value = canvas.getContext("2d");
  }

  render();
});

onUpdated(() => {
  render();
});
</script>

<template>
  <canvas
    id="canvas"
    :width="imageWidth * ONE_MM"
    :height="imageHeight * ONE_MM"
  />
</template>

<style scoped>
canvas {
  border: 1px solid black;
  margin: 20px;
  height: calc(100vh - 40px);
}
</style>
