import { onMounted, onUpdated } from 'vue'

// Глобальный debounce таймер для всех компонентов
let debounceTimer = null
const DEBOUNCE_MS = 50

/**
 * Проверяет, есть ли необработанные иконки (<i data-lucide> без svg)
 */
const hasUnprocessedIcons = () => {
  const icons = document.querySelectorAll('i[data-lucide]')
  return icons.length > 0
}

/**
 * Безопасное обновление иконок с debounce
 */
const debouncedRefresh = () => {
  if (debounceTimer) {
    clearTimeout(debounceTimer)
  }
  debounceTimer = setTimeout(() => {
    // Обновляем только если есть необработанные иконки
    if (hasUnprocessedIcons() && window.lucide) {
      window.lucide.createIcons()
    }
    debounceTimer = null
  }, DEBOUNCE_MS)
}

/**
 * Composable для автоматического обновления Lucide иконок
 * при монтировании и обновлении компонента.
 * 
 * Использование:
 *   import { useLucideIcons } from '@/composables/useLucideIcons'
 *   useLucideIcons()
 */
export function useLucideIcons() {
  const refresh = () => {
    debouncedRefresh()
  }

  // Немедленное обновление при монтировании
  onMounted(() => {
    if (window.lucide) {
      window.lucide.createIcons()
    }
  })
  
  // Debounced обновление при изменениях
  onUpdated(refresh)

  return { refreshIcons: refresh }
}
