import { useState, useEffect, useRef } from 'react'
import { useServer } from './useServer'

export function usePageGenerator(
  pageSpec: string,
  codeToRenderDuringLoading?: string,
  outputFormat: 'html' | 'react' = 'html'
) {
  const [streamedBuffer, setStreamedBuffer] = useState(codeToRenderDuringLoading ?? '')
  const [error, setError] = useState<Error | null>(null)
  const isMounted = useRef(false)
  const { generatePage } = useServer()

  useEffect(() => {
    if (isMounted.current) return
    isMounted.current = true

    const startGeneration = async () => {
      try {
        const pageGenerator = generatePage(pageSpec, outputFormat)
        for await (const chunk of pageGenerator) {
          setStreamedBuffer((prev) => prev + chunk)
        }
      } catch (err) {
        setError(err instanceof Error ? err : new Error('Error'))
      }
    }

    startGeneration()
  }, [pageSpec, generatePage, outputFormat])

  return { streamedBuffer, error }
}