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

export const ListUserOrders: React.FC<IListUserOrders> = props => {
	const {
		userId,
		scrollStyle,
		objExchange,
		merchantOrders,
		currentCourses,
		getEditableOrder,
	} = props

	const { id, shortName, orderDetail, merchantDetail } = objExchange

	let listOrders: any = (
		<tbody>
			<tr>
				<td colSpan={9}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		</tbody>
	)

	if (
		merchantOrders &&
		merchantOrders.length !== 0 &&
		merchantOrders[0] !== null
	) {
		listOrders = merchantOrders.map((item: any, index: number) => {
			const volumeUSDT: any = getValuationUSDT(
				currentCourses,
				item.asset,
				item.volume
			)
			const courseAssetUSDT = volumeUSDT / +item.volume
			// const statusFields = getColorValueStatus(shortName, item.orderStatus)

			// Подсветка/обработка колонки tradeType | подсветка BUY и SELL ордеров
			const classTradeType = item.tradeType === "SELL" ? "danger" : "success"

			let userURL = ""
			let orderDetailURL = ""
			if (
				shortName === "BN" ||
				shortName === "PX" ||
				shortName === "HB" ||
				shortName === "BZ" ||
				shortName === "GX" ||
				shortName === "MG" ||
				shortName === "KC" ||
				shortName === "BG"
			) {
				userURL = item.conterpartInfo.uid
				orderDetailURL = item.orderId
			} else if (shortName === "KX") {
				userURL = `?publicUserId=${item.conterpartInfo.uidPublic}`
				orderDetailURL = item.orderId
			} else if (shortName === "BT") {
				userURL = `${item.conterpartInfo.uid}/${item.asset}/${item.fiat}/${item.orderId}`
				orderDetailURL = item.orderId
			}

			return (
				<tbody key={index}>
					<tr>
						<td>{index + 1}</td>
						<td className={`table-${classTradeType}`}>
							<span className="icon-pay-dots">
								{item.tradeType}
								<img
									src={getUrlIcon("iconCurrencyByName", item.asset)}
									className="ml-1"
									alt="-"
									title={item.asset}
								/>
								{item.asset}
							</span>
						</td>
						<td className={`table-${classTradeType}`}>
							{`${getUrlIcon("FiatSymbol", item.fiat)}  ${getPriceMasked(
								Number(item.amount).toFixed(2)
							)}`}
						</td>
						<td className="text-right">
							{`${getPriceMasked(item.price)} ${item.asset}/${item.fiat}`}
						</td>
						<td>
							<span className="icon-pay-dots ml-2">
								{item.payMethodId === "" ? null : (
									<img
										src={getUrlIcon("iconPaymentByID", item.payMethodId)}
										alt="*"
										title={item.payMethodName}
									/>
								)}
								{item.conterpartInfo.nickName}
							</span>
						</td>
						<td>
							N/A{/* {item.taker.userStatsRet.registerDays} */}
							{" | "}
							N/A{/* {Number(merchantOrders).toFixed(0)} */}
							{" | "}
							N/A{/* {(parseFloat(merchantRatio) * 100).toFixed(1) + " %"} */}
							{" | "}
							<span className="span-link">
								<a
									href={`${merchantDetail}${userURL}`}
									target="_blank"
									rel="noopener noreferrer"
									className="text-warning"
									title="merchantDetail"
								>
									<FontAwesomeIcon icon={faExternalLinkAlt} />
								</a>
							</span>
						</td>
						<td>
							{item.clientType ? item.clientType : null}
							{shortName === "BN" || shortName === "PX" || shortName === "HB" ? (
								<span
									style={{
										color:
											item.conterpartInfo.chatUnreadCount === "0"
												? "lightgreen"
												: "red",
									}}
								>
									{item.conterpartInfo.chatUnreadCount}
								</span>
							) : null}
						</td>
						<td className="text-left">{`****${item.orderId.slice(-5)}`}</td>
					</tr>
					<tr>
						<td></td>
						<td>
							{item.asset !== "USDT"
								? `≈ $${getPriceMasked(courseAssetUSDT)}`
								: null}
						</td>
						<td>{`≈ $${getPriceMasked(+courseAssetUSDT * +item.volume)}`}</td>
						<td className="text-right">
							{item.asset !== "USDT"
								? `${item.volume}  ${item.asset}`
								: `${getPriceMasked(item.volume)}  ${item.asset}`}
						</td>
						<td>{item.conterpartInfo.realName}</td>
						{/* <td className={`text-${statusFields.color}`}>
							{`${statusFields.value} | status: ${item.orderStatus}`}
						</td> */}
						<td className={`text-${item.statusProps.color}`}>
							{`${item.statusProps.value}`}
						</td>
						<td>
							<a
								href={orderDetail + orderDetailURL}
								target="_blank"
								rel="noopener noreferrer"
								className="text-warning"
								title="orderDetail"
							>
								<FontAwesomeIcon icon={faInfoCircle} />
							</a>
							{` |`}
							<FontAwesomeIcon
								icon={faEdit}
								style={{ cursor: "pointer" }}
								className="text-success ml-1"
								title="orderEdit"
								onClick={() => {
									const objOrder = {
										userId,
										orderId: item.orderId,
										exchange: shortName,
										exchangeId: id,
									}
									getEditableOrder(objOrder)
								}}
							/>
						</td>
						<td className="text-left">{getTimeDate(Number(item.dateOrder))}</td>
					</tr>
				</tbody>
			)
		})
	}

	return (
		<div className="container">
			<div className="row">
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr>
								<th scope="col">#</th>
								<th scope="col">Side | Crypto</th>
								<th scope="col">Summ</th>
								<th scope="col" className="text-right">
									Price | Quantity
								</th>
								<th scope="col" className="tbl-header">
									<span>PayNumber</span>
									<span>Merchant</span>
								</th>
								<th scope="col" className="tbl-header">
									<span>Status</span>
									<span>Reg | Orders | Rate</span>
								</th>
								<th scope="col">Client | Detail</th>
								<th scope="col">Id | Date</th>
							</tr>
						</thead>
						{listOrders}
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
