// main.js
import { initRepo, addCircle, addTriangle, moveShape } from "./docManager.js"
import { drawAllShapesOnCanvas } from "./canvasManager.js"

let isDragging = false;
let selectedShapeId = null;
let offsetX = 0;
let offsetY = 0;

const container = document.getElementById("shapesCanvas");

// Add throttle function at the top
function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

// 1. Init the repo & document handle
const handle = initRepo()
await handle.whenReady()

// draw current state
drawAllShapesOnCanvas(container, handle.docSync().shapes)

// 2. Subscribe so we can re-render whenever doc changes
handle.on("change", (change) => {
  console.log("Document changed! Received patches:", change);
  console.log("Current shapes:", change.doc.shapes);
  // Only redraw if we're not currently dragging
  // TODO if (!isDragging) {
  // TODO modify name of the subsequent function:
  drawAllShapesOnCanvas(container, change.doc.shapes, change.patches);
  
});

// 3. Buttons holen
const addCircleButton = document.getElementById("addCircleButton");
const addTriangleButton = document.getElementById("addTriangleButton");

// 4. Event Listener für Buttons
addCircleButton.addEventListener("click", () => {
  // z. B. zufällige Position/Radius
  addCircle(100, 100, 30);
});

addTriangleButton.addEventListener("click", () => {
  // z. B. zufällige Koordinaten
  addTriangle( 200, 200, 220, 220, 180, 220);
});

// Mousedown: Prüfen, ob wir auf ein Shape klicken
container.addEventListener("mousedown", (e) => {
    const clickedElement = e.target;
    if (clickedElement.tagName === 'circle' || clickedElement.tagName === 'polygon') {
        isDragging = true;
        selectedShapeId = clickedElement.id;
        console.log("selectedShapeId:",selectedShapeId)
        // Get SVG coordinates
        // TODO reenable ?
/*         const pt = container.createSVGPoint();
        pt.x = e.clientX;
        pt.y = e.clientY;
        const svgP = pt.matrixTransform(container.getScreenCTM().inverse());
        console.log("svgP:",svgP)
        // Get the shape from the document
        const shape = handle.docSync().shapes.find(s => s.id === selectedShapeId);
        if (shape) {
            offsetX = svgP.x - shape.x;
            offsetY = svgP.y - shape.y;
        }
        console.log("offsetX:",offsetX)
        console.log("offsetY:",offsetY) */
    }
});

// Throttled version of moveShape
const throttledMoveShape = throttle((shapeId, x, y) => {
  console.log("throttledMoveShape shapeId:",shapeId)
  moveShape(shapeId, x, y);
  // Pass the moving shape ID to drawAllShapesOnCanvas
  // TODO no longer needed ?drawAllShapesOnCanvas(container, handle.docSync().shapes)
}, 16); // 50ms throttle time (20 updates per second)

// Mousemove: Shape verschieben, sofern dragging aktiv ist
container.addEventListener("mousemove", (e) => {
  if (!isDragging || selectedShapeId === null) return;

  const pt = container.createSVGPoint();
  pt.x = e.clientX;
  pt.y = e.clientY;
  const svgP = pt.matrixTransform(container.getScreenCTM().inverse());

  const newX = svgP.x - offsetX;
  const newY = svgP.y - offsetY;
console.log("newX:",newX)
console.log("newY:",newY)
console.log("selectedShapeId:",selectedShapeId)
  throttledMoveShape(selectedShapeId, newX, newY);
});

// Mouseup: Dragging beenden
container.addEventListener("mouseup", () => {
  isDragging = false;
  selectedShapeId = null;
});