import React from 'react'
import { useAccount } from 'wagmi'
import { ChainAddress } from '@futureverse/asset-register/types'
import { useAssets } from '@futureverse/asset-register-react/v2'
import { useFuturePassAccountAddress } from '@futureverse/react'
// React component to render all collectibles owned by a FuturePass user logged in.
export const AssetList = () => {
  // Get EOA address
  const { address } = useAccount()
  // Get FV address
  const { data: fpAccount } = useFuturePassAccountAddress()
  
  const collectionIds = [
      "7672:root:1234",
      "7672:root:2341",
      "99992:xrpl:rhMF5EWPpv6tn29fYF9x5Ny7Srs6x8x4iR" 
  ]
  
  const {
    assets
  } = useAssets(
    {
      first: 1000,
      addresses: [address as ChainAddress, fpAccount as ChainAddress],
      collectionIds
    },
    { enabled: !!fpAccount && !!address },
  )
  if (!assets) {
    return null
  }
  return (
    <div>
      {assets.map((asset) => <Asset key={asset.id} asset={asset} />)}
    </div>
  )
}