import * as React from "react"
import Scrollbar from "react-scrollbars-custom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons"
import { CONSTANTS } from "../constants"
import { IReportAllSpotOrders } from "../types"
import {
	getTimeDate,
	getValuationUSDT,
	getUrlIcon,
	getArraySortedByProp,
	getObjExchangeByExchangeId,
} from "../common"

export const ReportAllSpotOrders: React.FC<IReportAllSpotOrders> = props => {
	const { typeSpotOrder, spotOrders, currentCourses, scrollStyle } = props

	const ordersSorted = getArraySortedByProp("dateOrder", spotOrders)

	let totalSumm = 0
	let totalFee = 0

	const listOrders =
		ordersSorted.length === 0 ? (
			<tr>
				<td colSpan={11}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		) : (
			ordersSorted.map((item: any, index: number) => {
				const baseAsset = item.baseAsset
				const quoteAsset = item.quoteAsset
				let spotURL = ""
				const objExchange = getObjExchangeByExchangeId(item.exchangeId)
				const strURL = objExchange.spotTrade
				if (item.exchange === "BN") {
					spotURL = `${strURL}${baseAsset}_${quoteAsset}?theme=dark&type=spot`
				} else if (item.exchange === "HB") {
					spotURL = `${strURL}${baseAsset.toLowerCase()}_${quoteAsset.toLowerCase()}`
				} else if (item.exchange === "KX") {
					spotURL = `${strURL}${baseAsset.toLowerCase()}-${quoteAsset.toLowerCase()}`
				} else if (item.exchange === "BZ") {
					spotURL = `${strURL}${baseAsset.toLowerCase()}_${quoteAsset.toLowerCase()}`
				} else if (item.exchange === "BT") {
					spotURL = `${strURL}${baseAsset}/${quoteAsset}`
				} else if (item.exchange === "PX") {
					spotURL = `${strURL}${baseAsset}_${quoteAsset}`
				} else if (item.exchange === "MG") {
					spotURL = `${strURL}${baseAsset}_${quoteAsset}`
				} else if (item.exchange === "KC") {
					spotURL = `${strURL}${baseAsset}-${quoteAsset}`
				} else if (item.exchange === "GT") {
					spotURL = `${strURL}${baseAsset}_${quoteAsset}`
				} else if (item.exchange === "BG") {
					spotURL = `${strURL}${baseAsset}${quoteAsset}?type=spot`
				}

				const symbol = quoteAsset === "RUB" ? "₽" : "$"
				const tableRowClass = item.sideType === "BUY" ? "success" : "danger"
				const summOrder = +item.volume * +item.price
				const summOrderUSDT = quoteAsset === "RUB" ? +item.volume : summOrder
				totalSumm += +summOrderUSDT
				totalFee += +item.feeUSDT

				return (
					<tr key={index}>
						<td>{index + 1}</td>
						<td className={`table-${tableRowClass}`}>{item.sideType}</td>
						<td>
							<span className="icon-pay-dots" title={item.ticker}>
								<img
									src={getUrlIcon("iconCurrencyByName", baseAsset)}
									className="ml-1"
									alt="-"
									title={baseAsset}
								/>
								{baseAsset}
								{" / "}
								<img
									src={getUrlIcon("iconCurrencyByName", quoteAsset)}
									className="ml-1"
									alt="-"
									title={quoteAsset}
								/>
								{quoteAsset}
							</span>
						</td>
						<td>{item.tradeType}</td>
						<td>
							{baseAsset === "KAS" ||
							baseAsset === "XRP" ||
							baseAsset === "TRX" ||
							baseAsset === "LRS" ||
							baseAsset === "HTX" ||
							baseAsset === "LUX" ||
							baseAsset === "DOGETHER" ||
							baseAsset === "BTN" ||
							baseAsset === "DOGE" ||
							baseAsset === "OCTA" ||
							baseAsset === "CAU" ||
							baseAsset === "PAC"
								? Number(item.price).toFixed(5)
								: Number(item.price).toFixed(2)}
						</td>
						<td>
							{baseAsset === "ETH" || baseAsset === "BTC"
								? Number(item.volume).toFixed(6)
								: Number(item.volume).toFixed(2)}
						</td>
						<td>
							{typeSpotOrder === "active"
								? "--"
								: "$" + Number(item.feeUSDT).toFixed(2)}
						</td>
						<td>{`${symbol} ${getValuationUSDT(
							currentCourses,
							item.quoteAsset,
							summOrder
						)}`}</td>
						{/* <td>{`${symbol} ${summOrder.toFixed(2)}`}</td> */}
						<td>
							{`****${item.orderId.slice(-4)} | `}
							<a
								href={`${spotURL}`}
								target="_blank"
								rel="noopener noreferrer"
								className="text-warning ml-1"
								title="spotTradeURL"
							>
								<FontAwesomeIcon icon={faInfoCircle} />
							</a>
						</td>
						<td>{getTimeDate(item.dateOrder)}</td>
						<td>
							<span className="icon-pay-dots">
								<img
									src={getUrlIcon("logoExchange", item.exchange)}
									className="ml-1"
									alt="-"
									title={item.exchange}
								/>
								{` ${item.exchange} | ****${item.userId.slice(-4)}`}
							</span>
						</td>
					</tr>
				)
			})
		)

	return (
		<div className="row">
			<Scrollbar style={scrollStyle}>
				<table className="table table-hover table-striped table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th scope="col">Side</th>
							<th scope="col">Ticker</th>
							<th scope="col">Type</th>
							<th scope="col">Price</th>
							<th scope="col">Volume</th>
							<th scope="col">Fee</th>
							<th scope="col">Total</th>
							<th scope="col">OrderId</th>
							<th scope="col">Date</th>
							<th scope="col">P2P | userId</th>
						</tr>
					</thead>
					<tbody>{listOrders}</tbody>
					<tfoot>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td>
								{typeSpotOrder === "active" ? "--" : "$" + totalFee.toFixed(2)}
							</td>
							<td>{`$${totalSumm.toFixed(2)}`}</td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tfoot>
				</table>
			</Scrollbar>
		</div>
	)
}
