/*
 * Copyright (c) 2022 @automata-network/wallet-sdk authors and contributors.
 * This software may be modified and distributed under the terms of UNLICENSED
 * license. Refer to the LICENSE file for details.
 */
import React, { useEffect } from 'react'

import { Account, ConnectButton, Network } from '../'
import { useWallet } from '../../store/wallet'

export type WalletOptions = {
  accountAvatarPosition?: 'left' | 'right'
  showAccountAvatar?: boolean
  showBalance?: boolean
}

type WalletProps = {
  options?: WalletOptions
}

export const Wallet: React.FC<WalletProps> = ({ options }) => {
  const { account, prefixCls, theme } = useWallet()

  useEffect(() => {
    if (theme) {
      document.body.classList.add(`ata-wallet-theme-${theme}`)
    } else {
      document.body.classList.forEach((item) => {
        if (item.includes('ata-wallet-theme-')) {
          document.body.classList.remove(item)
        }
      })
    }
  }, [theme])

  if (!account) {
    return <ConnectButton />
  }

  return (
    <>
      <div className={`${prefixCls}wallet`}>
        {account && <Network />}

        <Account
          account={account}
          avatarPosition={options?.accountAvatarPosition}
          withAvatar={options?.showAccountAvatar}
        />
      </div>
    </>
  )
}