<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { ONE_MM } from "../const";
import { useStore } from "../store";
import { storeToRefs } from "pinia";

const store = useStore();
const {
  imageBackgroundColor,

  vMargin,
  vRotation,

  hMargin,
  hMargin2,

  marginEnable,
  marginColor,
  marginLeftMargin,

  imageHeight,
  imageWidth,

  textPropisi,
} = storeToRefs(store);

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

const clearCanvas = () => {

  if (ctx.value) {
    ctx.value.shadowColor
    ctx.value.fillStyle = imageBackgroundColor.value;
    ctx.value.fillRect(0, 0, imageWidth.value * ONE_MM, imageHeight.value * ONE_MM);
    ctx.value.beginPath();
  }
};

const render = () => {
  if (vMargin.value < 1 || hMargin.value < 1 || hMargin2.value < 1) {
    return
  }
  if (imageWidth.value < 1 || imageHeight.value < 1) {
    return
  }

  clearCanvas();

  var hMargins = [hMargin.value, hMargin2.value];

  var imageHeightPx = imageHeight.value * ONE_MM;
  var imageWidthPx = imageWidth.value * ONE_MM;
  var vMarginPx = vMargin.value * ONE_MM;
  var rotationDelta = imageHeightPx / Math.tan(vRotation.value / 180 * Math.PI);

  if (ctx.value) {
    ctx.value.strokeStyle = "#000000";
    ctx.value.beginPath();
    ctx.value.stroke();

    var x = 0;
    var y = 0;

    let i = 0;
    while (y < imageHeightPx) {
      y += hMargins[i % 2] * ONE_MM;
      ctx.value.moveTo(0, y);
      ctx.value.lineTo(imageWidthPx, y);
      ctx.value.stroke();
      i++;
    }

    x = 0;
    y = 0;
    i = 0;
    while (x - rotationDelta < imageWidthPx) {
      x = i * vMarginPx;
      var x0 = x;
      var y0 = 0;
      var x1 = x - rotationDelta;
      var y1 = imageHeightPx;
      ctx.value.moveTo(x0, y0);
      ctx.value.lineTo(x1, y1);
      ctx.value.stroke();
      i++;
    }


    x = marginLeftMargin.value * ONE_MM;
    if (marginEnable.value) {
      ctx.value.strokeStyle = marginColor.value;
      ctx.value.lineWidth = 2;
      ctx.value.beginPath();
      ctx.value.moveTo(x, 0);
      ctx.value.lineTo(x, imageHeightPx);
      ctx.value.stroke();
    }

    ctx.value.font = hMargins[1] * 3 * ONE_MM + "px propisi"; // todo хз почему тут x3
    ctx.value.fillStyle = "#cccccc";
    let lines = textPropisi.value.split('\n')
    i = 0;
    while (i < lines.length) {
      ctx.value.fillText(lines[i], (marginLeftMargin.value + 10) * ONE_MM, (hMargins[0] + hMargins[1]) * ONE_MM + (hMargins[0] + hMargins[1]) * ONE_MM * i);
      i++
    }
  }
};

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

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

  var f = new FontFace('propisi', 'url(/fonts/ttf/propisi.ttf)');
  f.load().then(function (font) {
    console.log('font propisi ready');
    document.fonts.add(font);
  });

  render();
});

watch(store, () => {
  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 - 100px);
}
</style>
