import { Controller } from "@hotwired/stimulus"
import Konva from "konva"

// Read-only Konva canvas for character previews
export default class extends Controller {
  static values = { data: String }

  connect() {
    if (!this.dataValue) return

    const w = this.element.offsetWidth  || 300
    const h = this.element.offsetHeight || 400

    // Replace canvas element with a div for Konva to own
    const div = document.createElement("div")
    div.style.width  = w + "px"
    div.style.height = h + "px"
    this.element.replaceWith(div)

    const stage = new Konva.Stage({ container: div, width: w, height: h })
    const layer = new Konva.Layer()
    stage.add(layer)

    // Scale to fit if saved canvas was larger
    const saved = JSON.parse(this.dataValue)
    const scaleX = w / (saved.attrs?.width  || 380)
    const scaleY = h / (saved.attrs?.height || 480)
    const scale  = Math.min(scaleX, scaleY)
    layer.scale({ x: scale, y: scale })

    layer.add(new Konva.Rect({ x: 0, y: 0, width: w / scale, height: h / scale, fill: "#f0e4c8", listening: false }))

    if (saved.children) {
      saved.children.forEach(child => {
        let shape
        switch (child.className) {
          case "Circle":  shape = new Konva.Circle(child.attrs);  break
          case "Rect":    shape = new Konva.Rect(child.attrs);    break
          case "Ellipse": shape = new Konva.Ellipse(child.attrs); break
          case "Arc":     shape = new Konva.Arc(child.attrs);     break
          case "Star":    shape = new Konva.Star(child.attrs);    break
          default: return
        }
        if (shape) { shape.listening(false); layer.add(shape) }
      })
    }

    layer.draw()
  }
}