metabuilder/frontends/codegen/src/hooks/core/use-library-loader.ts

import { useState, useEffect } from 'react'
import { loadRecharts, loadReactFlow } from '@/lib/library-loader'

type LoadState<T> = {
  library: T | null
  loading: boolean
  error: Error | null
}

export function useRecharts() {
  const [state, setState] = useState<LoadState<typeof import('recharts')>>({
    library: null,
    loading: true,
    error: null,
  })

  useEffect(() => {
    console.log('[HOOK] 🎨 useRecharts: Starting load')
    let mounted = true

    loadRecharts()
      .then(recharts => {
        if (mounted) {
          console.log('[HOOK] ✅ useRecharts: Loaded successfully')
          setState({ library: recharts, loading: false, error: null })
        }
      })
      .catch(error => {
        if (mounted) {
          console.error('[HOOK] ❌ useRecharts: Load failed', error)
          setState({ library: null, loading: false, error })
        }
      })

    return () => {
      mounted = false
    }
  }, [])

  return state
}

export function useReactFlow() {
  const [state, setState] = useState<LoadState<typeof import('reactflow')>>({
    library: null,
    loading: true,
    error: null,
  })

  useEffect(() => {
    console.log('[HOOK] 🔀 useReactFlow: Starting load')
    let mounted = true

    loadReactFlow()
      .then(reactflow => {
        if (mounted) {
          console.log('[HOOK] ✅ useReactFlow: Loaded successfully')
          setState({ library: reactflow, loading: false, error: null })
        }
      })
      .catch(error => {
        if (mounted) {
          console.error('[HOOK] ❌ useReactFlow: Load failed', error)
          setState({ library: null, loading: false, error })
        }
      })

    return () => {
      mounted = false
    }
  }, [])

  return state
}