---

import Layout from "#layouts/layoutCAD.astro";
import Widget2 from "#components/Widget.svelte";

---


<Layout title="Welcher Energieausweis">

<h1 class="text-3xl">Welcher Energieausweis?</h1>

<div class="mt-12 m-auto w-[95%] relative">
<Widget2 client:load />
</div>


 <div class="controls">
    <button onclick="clearCanvas()">Clear</button>
  </div>
  <canvas id="cadCanvas" width="800" height="600"></canvas>
  <div class="log">
    <strong>Captured Lines:</strong>
    <ul id="line-log"></ul>
  </div>

  <script>
    const canvas = document.getElementById('cadCanvas');
    const ctx = canvas.getContext('2d');
    const lineLog = document.getElementById('line-log');
    const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
    const gridSize = 10; // Size of each grid cell in pixels
    let lastEndPoint = null;
    let lastStartPoint = null;
    let capturedLines = [];

    // Snap a coordinate to the nearest grid point
    function snapToGrid(value) {
      return Math.round(value / gridSize) * gridSize;
    }

    // Draw the grid
    function drawGrid() {
      ctx.beginPath();
      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
      ctx.lineWidth = 0.5;

      // Draw vertical lines
      for (let x = 0; x <= canvas.width; x += gridSize) {
        ctx.moveTo(x, 0);
        ctx.lineTo(x, canvas.height);
      }

      // Draw horizontal lines
      for (let y = 0; y <= canvas.height; y += gridSize) {
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
      }

      ctx.stroke();
    }

    // Clear the canvas and reset logs
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      capturedLines = [];
      lastEndPoint = null;
      lastStartPoint = null;
      drawGrid(); // Redraw the grid after clearing
      updateLineLog();
    }

    // Update the captured lines log
    function updateLineLog() {
      lineLog.innerHTML = capturedLines
        .map((line, index) => {
          const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
          return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
        })
        .join('');
    }

    // Calculate the length of a line in meters
    function calculateLineLengthInMeters(x1, y1, x2, y2) {
      const dx = x2 - x1;
      const dy = y2 - y1;
      const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
      return lengthInPixels * pixelToMeter;
    }

    // Mouse events
    canvas.addEventListener('mousedown', (e) => {
      const clickX = snapToGrid(e.offsetX);
      const clickY = snapToGrid(e.offsetY);

      // Determine the starting point for the new line
      let startX, startY;

      if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
        // Snap to the last endpoint
        startX = lastEndPoint.x;
        startY = lastEndPoint.y;
      } else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
        // Snap to the last starting point
        startX = lastStartPoint.x;
        startY = lastStartPoint.y;
      } else if (!capturedLines.length) {
        // First line can start anywhere
        startX = clickX;
        startY = clickY;
      } else {
        // If click doesn't match a valid connection, do nothing
        return;
      }

      // Determine the endpoint
      const endX = snapToGrid(e.offsetX);
      const endY = snapToGrid(e.offsetY);

      // Avoid drawing a "point" as a line
      if (startX === endX && startY === endY) {
        return;
      }

      // Draw the line
      drawLine(startX, startY, endX, endY);

      // Update the last start and end points
      lastStartPoint = { x: startX, y: startY };
      lastEndPoint = { x: endX, y: endY };

      // Capture the line details
      capturedLines.push({ startX, startY, endX, endY });
      updateLineLog();
    });

    // Drawing functions
    function drawLine(x1, y1, x2, y2) {
      ctx.beginPath();
      ctx.strokeStyle = "#000000"; // Black color for lines
      ctx.lineWidth = 2; // Thicker lines
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
    }

    // Initialize canvas
    drawGrid(); // Draw the grid when the page loads
  </script>

</Layout>