'use client'

import * as React from 'react'
import type {
  DevModeIntegration,
  DevModeIntegrationLoader
} from '@admin/components/shared/dev-mode/dev-mode-types'

export function useDevModeIntegration(loadIntegration: DevModeIntegrationLoader) {
  const [integration, setIntegration] = React.useState<DevModeIntegration | null>(null)
  const [loadError, setLoadError] = React.useState<string | null>(null)
  const [isPending, startTransition] = React.useTransition()
  const integrationPromiseRef = React.useRef<Promise<DevModeIntegration> | null>(null)

  const handleOpenChange = React.useCallback(
    (open: boolean) => {
      if (!open || integration || integrationPromiseRef.current) {
        return
      }

      startTransition(async () => {
        try {
          integrationPromiseRef.current = loadIntegration()
          const nextIntegration = await integrationPromiseRef.current
          setIntegration(nextIntegration)
          setLoadError(null)
        } catch (error) {
          integrationPromiseRef.current = null
          console.error(error)
          setLoadError('Integration details could not be loaded.')
        }
      })
    },
    [integration, loadIntegration]
  )

  return {
    integration,
    isPending,
    loadError,
    handleOpenChange
  }
}