import { onBeforeUnmount, onMounted, type Ref } from 'vue'

/** Cloudflare Turnstile varsayılan genişliği (px) */
const TURNSTILE_WIDTH = 300

/**
 * Turnstile widget'ı sarmalayan elementin genişliğine göre --turnstile-scale CSS değişkenini günceller.
 * Böylece widget form alanı genişliğinde görünür.
 */
export function useTurnstileScale(wrapperRef: Ref<HTMLElement | null>) {
  function updateScale() {
    const el = wrapperRef.value
    if (!el) return
    const w = el.offsetWidth
    if (w > 0) {
      const scale = w / TURNSTILE_WIDTH
      el.style.setProperty('--turnstile-scale', String(scale))
    }
  }

  let observer: ResizeObserver | null = null

  onMounted(() => {
    updateScale()
    const el = wrapperRef.value
    if (el && typeof ResizeObserver !== 'undefined') {
      observer = new ResizeObserver(updateScale)
      observer.observe(el)
    }
  })

  onBeforeUnmount(() => {
    if (observer && wrapperRef.value) {
      observer.unobserve(wrapperRef.value)
      observer = null
    }
  })
}