import { useContext, useEffect, useState } from 'react'
import { ConnectionContext } from '../providers/ConnectionProvider'
import type {
  UseDetectedWalletsReturn,
  WalletMetadata
} from '@meshconnect/uwc-types'

export function useDetectedWallets(): UseDetectedWalletsReturn {
  const context = useContext(ConnectionContext)

  if (!context) {
    throw new Error(
      'useInjectedAvailableWallets must be used within a ConnectionProvider'
    )
  }

  const { connector, wallets, isReady } = context

  const [detectedWallets, setDetectedWallets] = useState<WalletMetadata[]>([])

  useEffect(() => {
    const checkState = () => {
      const newDetectedWallets = wallets.filter(wallet =>
        connector.isConnectionModeAvailable('injected', wallet.id)
      )

      setDetectedWallets(newDetectedWallets)
    }

    // Check initially and on state changes
    checkState()
    const unsubscribe = connector.subscribe(checkState)

    return unsubscribe
  }, [connector, wallets])

  return { detectedWallets, isReady }
}