import * as React from "react"
import Scrollbar from "react-scrollbars-custom"
import { getUrlIcon } from "../common"
// import { CONSTANTS } from "../constants"
import { IReportCostNew } from "../types"

export const ReportCostNew: React.FC<IReportCostNew> = props => {
	const { reportCost, scrollStyle } = props

	// получаем массив уникальных значений нименований крипты
	const costListAssets = [
		{ asset: "USDT" },
		{ asset: "BTC" },
		{ asset: "ETH" },
		{ asset: "RUB" },
		{ asset: "USDC" },
		{ asset: "TON" },
		{ asset: "XMR" },
		{ asset: "LTC" },
		// { asset: "HTX" },
		{ asset: "USDD" },
		{ asset: "KAS" },
	]
	const symRUB = getUrlIcon("FiatSymbol", "RUB")
	const symUSD = getUrlIcon("FiatSymbol", "USD")
	const symEUR = getUrlIcon("FiatSymbol", "EUR")
	const styles: any = {
		footer: {
			backgroundColor: "lightskyblue",
			color: "black",
			// fontWeight: "bold",
		},
		total: {
			backgroundColor: "grey",
			color: "black",
			fontWeight: "bold",
		},
		p2p: {
			sells: { backgroundColor: "pink", color: "black" },
			buys: { backgroundColor: "lightgreen", color: "black" },
		},
		spot: {
			sells: { backgroundColor: "brown", color: "white" },
			buys: { backgroundColor: "green", color: "white" },
		},
	}

	const thListItems: any = costListAssets.map(
		(item: any, index: number) => {
			return (
				<th scope="col" key={index}>
					<span className="icon-pay-dots">
						<img
							src={getUrlIcon("iconCurrencyByName", item.asset)}
							className="mr-1"
							alt="-"
							title={item.asset}
						/>
						{/* {item.asset} */}
					</span>
				</th>
			)
		}
	)

	const getItemValue = (obj: any) => {
		const { arr, typeOrder, fiat, tradeType } = obj
		const result = {
			totalAmount: 0, // P2P or SPOT
			totalVolume: 0, // P2P or SPOT
			deals: 0, // P2P or SPOT
			course: 0, // P2P or SPOT
		}
		const tradesFiltred = arr.filter((i: any) => {
			return (
				i.typeOrder === typeOrder &&
				i.fiat === fiat &&
				i.tradeType === tradeType
			)
		})
		if (tradesFiltred.length !== 0) {
			result.totalAmount = tradesFiltred[0].totalAmount
			result.totalVolume = tradesFiltred[0].totalVolume
			result.deals = tradesFiltred[0].deals
			result.course = tradesFiltred[0].course
		}
		return result
	}

	const getListItems = (params: any) => {
		const { typeItem, typeOrder, fiat, tradeType } = params
		const result = costListAssets.map((item: any, index: number) => {
			const arrFiltred = reportCost.filter((i: any) => {
				return i.asset === item.asset
			})
			if (arrFiltred.length !== 0) {
				const objParams: any = {
					arr: arrFiltred[0].trades,
					typeOrder,
					fiat,
					tradeType,
				}
				let value: any = 0
				const ft = fiat === "USDT" ? "USD" : fiat
				const sym =
					typeItem === "Deals" || typeItem === "Volume"
						? ""
						: getUrlIcon("FiatSymbol", ft)
				if (typeItem === "startBalanceUSDT") {
					value =
						!arrFiltred[0].startBalance ||
						arrFiltred[0].startBalance.summUSDT === null
							? 0
							: arrFiltred[0].startBalance.summUSDT.toFixed(2)
				} else if (typeItem === "startBalanceAsset") {
					value =
						!arrFiltred[0].startBalance ||
						arrFiltred[0].startBalance.volumeAsset === null
							? 0
							: arrFiltred[0].startBalance.volumeAsset.toFixed(2)
				} else if (typeItem === "startCostRUB") {
					value =
						!arrFiltred[0].startBalance ||
						arrFiltred[0].startBalance.volumeAsset === null
							? 0
							: arrFiltred[0].startBalance.cost.courseAsset.toFixed(2)
				} else if (typeItem === "startCostUSD") {
					value =
						!arrFiltred[0].startBalance ||
						arrFiltred[0].startBalance.volumeAsset === null
							? 0
							: arrFiltred[0].startBalance.cost.courseUSDT.toFixed(2)
				} else if (typeItem === "Amount") {
					value = getItemValue(objParams).totalAmount.toFixed(2)
				} else if (typeItem === "Volume") {
					value = getItemValue(objParams).totalVolume.toFixed(2)
				} else if (typeItem === "Deals") {
					value = getItemValue(objParams).deals
				} else if (typeItem === "Course") {
					value = getItemValue(objParams).course.toFixed(2)
				}
				return <td key={index}>{value > 0 ? sym + value : "-"}</td>
			}
		})

		return result
	}

	return (
		<div className="row">
			<Scrollbar style={scrollStyle}>
				<table className="table table-hover table-striped table-sm">
					<thead>
						<tr>
							<th scope="col">Crypto</th>
							{thListItems}
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style={styles.footer}>{`Start balance, ${getUrlIcon(
								"FiatSymbol",
								"USD"
							)}`}</td>
							{getListItems({ typeItem: "startBalanceUSDT", fiat: "USD" })}
						</tr>
						<tr>
							<td style={styles.footer}>Start balance, Asset</td>
							{getListItems({ typeItem: "startBalanceAsset" })}
						</tr>
						<tr>
							<td style={styles.footer}>{`Start cost, ${getUrlIcon(
								"FiatSymbol",
								"RUB"
							)}`}</td>
							{getListItems({ typeItem: "startCostRUB", fiat: "RUB" })}
						</tr>
						<tr>
							<td style={styles.footer}>{`Start cost, ${getUrlIcon(
								"FiatSymbol",
								"USD"
							)}`}</td>
							{getListItems({ typeItem: "startCostUSD", fiat: "USD" })}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Amount, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Course, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Amount, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Course, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Amount, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Course, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "P2P",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Amount, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Course, ${symRUB}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "SPOT",
								fiat: "RUB",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Amount, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY_Course, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Amount, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.spot.buys}>{`SPOT_BUY_Course, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "BUY",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Amount, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL_Course, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "P2P",
								fiat: "USD",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Amount, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Amount",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Volume, Asset`}</td>
							{getListItems({
								typeItem: "Volume",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Deals`}</td>
							{getListItems({
								typeItem: "Deals",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.spot.sells}>{`SPOT_SELL_Course, ${symUSD}`}</td>
							{getListItems({
								typeItem: "Course",
								typeOrder: "SPOT",
								fiat: "USDT",
								tradeType: "SELL",
							})}
						</tr>
						<tr>
							<td style={styles.p2p.buys}>{`P2P_BUY, ${symEUR}`}</td>
							{/* {getListItems({ typeItem: "P2P", fiat: "EUR", tradeType: "BUY" })} */}
						</tr>
						<tr>
							<td style={styles.p2p.sells}>{`P2P_SELL, ${symEUR}`}</td>
							{/* {getListItems({ typeItem: "P2P", fiat: "EUR", tradeType: "SELL" })} */}
						</tr>
						<tr>
							<td style={styles.footer}>Margin, %</td>
						</tr>
						<tr>
							<td style={styles.footer}>P&L</td>
						</tr>
						<tr>
							<td style={styles.footer}>{`End balance, ${getUrlIcon(
								"FiatSymbol",
								"USD"
							)}`}</td>
						</tr>
						<tr>
							<td style={styles.footer}>End balance, Asset</td>
						</tr>
						<tr>
							<td style={styles.footer}>{`End cost, ${getUrlIcon(
								"FiatSymbol",
								"RUB"
							)}`}</td>
						</tr>
						<tr>
							<td style={styles.footer}>{`End cost, ${getUrlIcon(
								"FiatSymbol",
								"USD"
							)}`}</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td style={styles.total}>Total</td>
						</tr>
					</tfoot>
				</table>
			</Scrollbar>
		</div>
	)
}
