import classNames from 'classnames'
import { useCallback, useMemo } from 'react'

import AccountSummaryLeverage from 'components/account/AccountSummary/AccountSummaryLeverage'
import HealthBar from 'components/account/Health/HealthBar'
import Button from 'components/common/Button'
import DisplayCurrency from 'components/common/DisplayCurrency'
import { ArrowRight, ArrowRightLine } from 'components/common/Icons'
import Text from 'components/common/Text'
import { BN_ZERO } from 'constants/math'
import { ORACLE_DENOM } from 'constants/oracle'
import useStore from 'store'
import { BNCoin } from 'types/classes/BNCoin'
import { calculateAccountBalanceValue } from 'utils/accounts'

interface Props {
  account: Account
  updatedAccount?: Account
  prices: BNCoin[]
  assets: Asset[]
  leverage: number
  updatedLeverage: number | null
  apr: number
  health: number
  updatedHealth: number
  healthFactor: number
  updatedHealthFactor: number
  isAccountDetails?: boolean
}

export default function AccountSummaryHeader(props: Props) {
  const {
    account,
    updatedAccount,
    prices,
    assets,
    leverage,
    updatedLeverage,
    health,
    healthFactor,
    updatedHealth,
    updatedHealthFactor,
    isAccountDetails,
  } = props
  const address = useStore((s) => s.address)
  const onClose = useCallback(() => useStore.setState({ accountDetailsExpanded: false }), [])
  const accountBalance = useMemo(
    () => (account ? calculateAccountBalanceValue(account, prices, assets) : BN_ZERO),
    [account, prices, assets],
  )
  const updatedAccountBalance = useMemo(
    () =>
      updatedAccount ? calculateAccountBalanceValue(updatedAccount, prices, assets) : undefined,
    [updatedAccount, prices, assets],
  )
  const hasChanged = !updatedAccountBalance?.isEqualTo(accountBalance)
  const increase = updatedAccountBalance?.isGreaterThan(accountBalance)

  return (
    <div className='relative flex flex-wrap w-full p-4 pb-2 border-b bg-white/10 border-white/10'>
      {isAccountDetails && (
        <Button
          onClick={onClose}
          leftIcon={<ArrowRightLine />}
          iconClassName='w-full'
          className='!absolute top-4 right-4 w-8 h-6 px-2 z-4'
          size='xs'
          color='secondary'
        />
      )}
      {isAccountDetails && (
        <Text size='sm' className='w-full pb-1 text-white/50'>
          {account.id === address ? 'Red Bank' : `Credit Account ${account.id}`}
        </Text>
      )}
      <div className='flex items-end w-full gap-2 pb-2 border-b border-white/5'>
        <DisplayCurrency
          options={{ abbreviated: false }}
          coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, accountBalance)}
          className='text-lg -mb-[1px]'
        />
        {hasChanged && updatedAccountBalance && (
          <>
            <span
              className={classNames(
                'w-3 flex h-full items-center',
                increase ? 'text-profit' : 'text-loss',
              )}
            >
              <ArrowRight />
            </span>
            <DisplayCurrency
              options={{ abbreviated: false }}
              coin={BNCoin.fromDenomAndBigNumber(ORACLE_DENOM, updatedAccountBalance)}
              className={classNames(
                'text-lg -mb-[1px]',
                hasChanged && increase && 'text-profit',
                hasChanged && !increase && 'text-loss',
              )}
            />
          </>
        )}

        <Text className='text-white/50' size='xs'>
          Networth
        </Text>
      </div>
      <div className='flex items-center w-full pt-2'>
        <div className='flex flex-wrap pr-4 border-r w-29 border-white/5'>
          <Text size='xs' className='mb-0.5 w-full text-white/50'>
            Leverage
          </Text>
          <AccountSummaryLeverage
            leverage={leverage}
            updatedLeverage={updatedLeverage}
            className='text-sm'
            containerClassName='flex items-center gap-1'
            enforceSuffix
          />
        </div>
        <div className='flex flex-wrap content-start flex-grow h-full pl-2'>
          <Text size='xs' className='w-full h-4 mb-2 text-white/50'>
            Health
          </Text>
          <HealthBar
            health={health}
            healthFactor={healthFactor}
            updatedHealth={updatedHealth}
            updatedHealthFactor={updatedHealthFactor}
          />
        </div>
      </div>
    </div>
  )
}