import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export default function useBackgroundAttrs(containerRef) {
  const { pathname } = useLocation()
  useEffect(() => {
    const el = containerRef.current
    if (!el) return

    // data-bg-src → background-image
    el.querySelectorAll('[data-bg-src]').forEach(el => {
      el.style.backgroundImage = 'url(' + el.dataset.bgSrc + ')'
      el.removeAttribute('data-bg-src')
      el.classList.add('background-image')
    })

    // data-bg-color → background-color
    el.querySelectorAll('[data-bg-color]').forEach(el => {
      el.style.backgroundColor = el.dataset.bgColor
      el.removeAttribute('data-bg-color')
    })

    // data-border → CSS var
    el.querySelectorAll('[data-border]').forEach(el => {
      el.style.setProperty('--th-border-color', el.dataset.border)
    })

    // data-mask-src → mask-image
    el.querySelectorAll('[data-mask-src]').forEach(el => {
      el.style.maskImage = 'url(' + el.dataset.maskSrc + ')'
      el.style.webkitMaskImage = 'url(' + el.dataset.maskSrc + ')'
      el.classList.add('bg-mask')
      el.removeAttribute('data-mask-src')
    })
  }, [containerRef, pathname])
}