import React from "react"
import { BlockProps, MUsdCircle02 } from "@mezo-org/mezo-clay"
import ListingItem from "../ListingItem"
import { getAsset } from "../../../utils/assets"
import { useBorrowData } from "../../../hooks/useBorrowData"
import { useTokensBalances } from "../../../hooks/useTokensBalances"
import AccountError from "./AccountError"

export default function AccountMusdListing(
  props: Omit<BlockProps, "children">,
) {
  const {
    data: borrowData,
    isError: isBorrowDataError,
    isPending: isBorrowDataPending,
  } = useBorrowData()

  const {
    data: tokensBalancesData,
    isError: isTokensBalancesError,
    isPending: isTokensBalancesPending,
  } = useTokensBalances()

  if (isBorrowDataPending || isTokensBalancesPending) {
    return <ListingItem isLoading />
  }

  if (isBorrowDataError || isTokensBalancesError) {
    return <AccountError topic="MUSD balance" />
  }

  const musdBalance = Number(tokensBalancesData.MUSD.usd.formatted)
  const lockedCollateral = Number(borrowData.debtInUsd.formatted)

  return (
    <ListingItem
      icon={<MUsdCircle02 />}
      label={getAsset("MUSD").name}
      value={musdBalance}
      subLabel="Borrowed"
      subValue={lockedCollateral}
      {...props}
    />
  )
}