import { sumBy } from 'lodash'
import clsx from 'clsx'

import { Bet } from 'web/lib/firebase/bets'
import {
  formatMoney,
  formatWithCommas,
} from 'common/util/format'
import { Col } from './layout/col'
import {
  Contract,
} from 'web/lib/firebase/contracts'
import { Row } from './layout/row'
import { YesLabel, NoLabel } from './outcome-label'
import {
  calculatePayout,
  getContractBetMetrics,
  getProbability,
} from 'common/calculate'
import { floatingEqual } from 'common/util/math'
import { InfoTooltip } from './info-tooltip'
import { ProfitBadge } from './profit-badge'

export function BetsSummary(props: {
  contract: Contract
  bets: Bet[]
  isYourBets: boolean
  className?: string
}) {
  const { contract, className } = props
  const { resolution, outcomeType } = contract
  const isBinary = outcomeType === 'BINARY'

  const bets = props.bets.filter((b) => !b.isAnte)
  const { profitPercent, payout, profit, totalShares } = getContractBetMetrics(
    contract,
    bets
  )

  const excludeSales = bets.filter((b) => !b.isSold && !b.sale)
  const yesWinnings = sumBy(excludeSales, (bet) =>
    calculatePayout(contract, bet, 'YES')
  )
  const noWinnings = sumBy(excludeSales, (bet) =>
    calculatePayout(contract, bet, 'NO')
  )

  const prob = isBinary ? getProbability(contract) : 0
  const expectation = prob * yesWinnings + (1 - prob) * noWinnings

  if (
    isBinary &&
    floatingEqual(totalShares.YES ?? 0, 0) &&
    floatingEqual(totalShares.NO ?? 0, 0)
  )
    return <></>

  return (
    <Col className={clsx(className, 'gap-4')}>
      <Row className="flex-wrap gap-4 sm:flex-nowrap sm:gap-6">
        {resolution ? (
          <Col>
            <div className="text-sm text-gray-500">Payout</div>
            <div className="whitespace-nowrap">
              {formatMoney(payout)}{' '}
              <ProfitBadge profitPercent={profitPercent} />
            </div>
          </Col>
        ) : isBinary ? (
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Position{' '}
              <InfoTooltip text="Number of shares you own on net. 1 YES share = M$1 if the market resolves YES." />
            </div>
            <div className="whitespace-nowrap">
              {yesWinnings > 0 ? (
                <>
                  <YesLabel /> {formatWithCommas(yesWinnings)}
                </>
              ) : (
                <>
                  <NoLabel /> {formatWithCommas(noWinnings)}
                </>
              )}
            </div>
          </Col>
        ) : (
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Expected value {''}
              <InfoTooltip text="The estimated payout of your position using the current market probability." />
            </div>
            <div className="whitespace-nowrap">{formatMoney(payout)}</div>
          </Col>
        )}

        {isBinary && (
          <Col>
            <div className="whitespace-nowrap text-sm text-gray-500">
              Expected value{' '}
              <InfoTooltip text="The estimated payout of your position using the current market probability." />
            </div>
            <div className="whitespace-nowrap">{formatMoney(expectation)}</div>
          </Col>
        )}

        <Col>
          <div className="whitespace-nowrap text-sm text-gray-500">
            Profit{' '}
            <InfoTooltip text="Includes both realized & unrealized gains/losses from trades." />
          </div>
          <div className="whitespace-nowrap">
            {formatMoney(profit)} <ProfitBadge profitPercent={profitPercent} />
          </div>
        </Col>
      </Row>
      <Row className="flex-wrap-none gap-4"></Row>
    </Col>
  )
}