import * as React from "react"
import { useState } from "react"
import Scrollbar from "react-scrollbars-custom"
import { CONSTANTS } from "../constants"
import { IReportBalances } from "../types"
import { getSummUSDT } from "../common"

export const ReportBalances: React.FC<IReportBalances> = props => {
	const { reportBalances, scrollStyle } = props

	const [isUSDT, changeValuation] = useState(true)
	const symbol = isUSDT ? "$" : "₽"

	const listItem =
		reportBalances && reportBalances.length !== 0 ? (
			reportBalances.map((item: any, index: number) => {
				const summTrezor =
					item.balances && item.balances.length !== 0
						? getSummUSDT(item.balances, "TZ")
						: 0
				const summP2P =
					item.balances && item.balances.length !== 0
						? +getSummUSDT(item.balances, "ALL") - +summTrezor
						: 0
				const trezorBalance = isUSDT
					? +summTrezor
					: +summTrezor * +item.courseUSDTRUB
				const p2p_Balance = isUSDT ? summP2P : +item.courseUSDTRUB * summP2P
				const cashBalance = isUSDT
					? +item.cashBalanceRUB / +item.courseUSDTRUB
					: +item.cashBalanceRUB
				const creditPlus = isUSDT
					? +item.creditPlusRUB.summ / +item.courseUSDTRUB
					: +item.creditPlusRUB.summ
				const creditMinus = isUSDT
					? +item.creditMinusRUB.summ / +item.courseUSDTRUB
					: +item.creditMinusRUB.summ
				const creditBalance = isUSDT
					? +item.creditBalanceRUB / +item.courseUSDTRUB
					: +item.creditBalanceRUB
				const totalSumm =
					+trezorBalance + +p2p_Balance + +cashBalance + +creditBalance
				return (
					<tr key={index}>
						<td className="text-left">{`${item.localDate}`}</td>
						<td>{`${Number(item.courseUSDTRUB).toFixed(2)}`}</td>
						{/* trezorBalance */}
						<td>{`${symbol} ${Number(trezorBalance).toFixed(1)}`}</td>
						{/* p2p_Balance */}
						<td>{`${symbol} ${Number(p2p_Balance).toFixed(1)}`}</td>
						{/* cashBalance */}
						<td>{`${symbol} ${Number(cashBalance).toFixed(1)}`}</td>
						{/* creditPlus */}
						<td>{`${symbol} ${Number(creditPlus).toFixed(1)}`}</td>
						{/* creditMinus */}
						<td>{`${symbol} ${Number(creditMinus).toFixed(1)}`}</td>
						{/* creditBalance */}
						<td>{`${symbol} ${Number(creditBalance).toFixed(1)}`}</td>
						{/* Total */}
						<td>{`${symbol} ${Number(totalSumm).toFixed(1)}`}</td>
					</tr>
				)
			})
		) : (
			<tr>
				<td colSpan={9}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		)

	return (
		<div className="container">
			<div className="row">
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr className="">
								<th className="text-left">
									Date
									{isUSDT ? (
										<button
											className="btn btn-outline-info btn-sm ml-3"
											onClick={() => changeValuation(!isUSDT)}
										>
											{symbol}
										</button>
									) : (
										<button
											className="btn btn-outline-success btn-sm ml-3"
											onClick={() => changeValuation(!isUSDT)}
										>
											{symbol}
										</button>
									)}
								</th>
								<th>USDT/RUB</th>
								<th>walletsBalance</th>
								<th>p2p_Balance</th>
								<th>cashBalance</th>
								<th>credit+</th>
								<th>credit-</th>
								<th>creditBalance</th>
								<th>Total</th>
							</tr>
						</thead>
						<tbody>{listItem}</tbody>
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
