import React from "react"
import { BlockProps, MezoCircle, useStyletron } from "@mezo-org/mezo-clay"
import ListingItem from "../ListingItem"
import { getAsset } from "../../../utils/assets"
import { useTokensBalances } from "../../../hooks/useTokensBalances"
import { formatNumberToCompactString } from "../../../utils/numbers"

export default function AccountMezoListing(
  props: Omit<BlockProps, "children">,
) {
  const [, theme] = useStyletron()
  const {
    data: tokensBalancesData,
    isError: isTokensBalancesError,
    isPending: isTokensBalancesPending,
  } = useTokensBalances()

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

  if (isTokensBalancesError) {
    // TODO: allow to display error state for MEZO balance after MEZO asset is public
    return null // <AccountError topic="MEZO balance" />
  }

  const mezoBalance = Number(tokensBalancesData.MEZO.formatted)

  if (mezoBalance === 0) {
    return null
  }

  return (
    <ListingItem
      icon={
        <MezoCircle
          color={theme.colors.accent}
          symbolColor={theme.colors.white}
        />
      }
      label={getAsset("MEZO").name}
      // TODO: example MEZO asset item - update after MEZO asset has price oracle
      // value="N/A"
      // valueFormatter={() => "N/A"}
      // subLabel="Balance"
      // subValue={mezoBalance}
      // subValueFormatter={() => formatNumberToCompactString(mezoBalance)}
      value={mezoBalance}
      valueFormatter={(value: number | string) =>
        formatNumberToCompactString(Number(value))
      }
      {...props}
    />
  )
}