// app/javascript/controllers/font_validator_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["textField", "hiddenField", "countDisplayField"]

  connect() {
    this.measure()
  }

  measure() {
    const text = this.textFieldTarget.value
    const pixelWidth = this.getTextWidth(text, "bold 6px sans-serif")
    
    // Do something with the pixel width (e.g., store in a hidden field for Rails to read)
    if (this.hasHiddenFieldTarget) {
      this.hiddenFieldTarget.value = pixelWidth
      this.countDisplayFieldTarget.textContent = `${pixelWidth}`
      if (pixelWidth > 100) {
        this.countDisplayFieldTarget.classList.add("text-brightlava")
      } else {
        this.countDisplayFieldTarget.classList.remove("text-brightlava")
      }
    }
  }

  // Canvas measurement trick
  getTextWidth(text, font) {
    const canvas = document.createElement("canvas")
    const context = canvas.getContext("2d")
    context.font = font
    const metrics = context.measureText(text)
    return Math.ceil(metrics.width)
  }
}