import * as React from "react"
import Scrollbar from "react-scrollbars-custom"
import { CONSTANTS } from "../constants"
import { IListFavoriteAdvs } from "../types"
import {
	getPriceMasked,
	getTimeDate,
	getUrlIcon,
	getValuationUSDT,
	replace000ToK,
} from "../common"

export const ListFavoriteAdvs: React.FC<IListFavoriteAdvs> = props => {
	const { favoriteAdvs, currentCourses, scrollStyle } = props

	const { nickName, merchantStatus, buyList, sellList } = favoriteAdvs
	const orders = buyList && sellList ? buyList.concat(sellList) : []

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

	let totalVolume: any = 0

	if (orders && orders.length !== 0) {
		listOrders = orders.map((item: any, index: number) => {
			let clsTradeType
			item.tradeType === "BUY"
				? (clsTradeType = "success")
				: (clsTradeType = "danger")

			const surplusAmount: any =
				item.asset === "BTC"
					? Number(item.surplusAmount).toFixed(5)
					: Number(item.surplusAmount).toFixed(2)

			const volumeUSDTsurplusAmount: any = getValuationUSDT(
				currentCourses,
				item.asset,
				surplusAmount
			)

			const initAmount: any =
				item.asset === "BTC"
					? Number(item.initAmount).toFixed(5)
					: Number(item.initAmount).toFixed(2)

			const volumeUSDTinitAmount: any = getValuationUSDT(
				currentCourses,
				item.asset,
				initAmount
			)

			// Количество дней активности объявления
			const differenceByAllDays = (
				(item.advUpdateTime - item.createTime) /
				(1000 * 60 * 60 * 24)
			).toFixed(1)

			// Проторгованный объём $
			const differenceTradeVolume =
				volumeUSDTinitAmount - volumeUSDTsurplusAmount

			// Средний проторгованный объём за 30 дней $
			const deltaPer30days =
				(+differenceTradeVolume / +differenceByAllDays) * 30

			const paymentDots = item.tradeMethods.map(
				(elem: any, index: number) => {
					return (
						<span className="icon-pay-dots" key={index}>
							<img
								alt="-"
								src={getUrlIcon("iconPaymentByID", elem.identifier)}
								title={elem.identifier}
							/>
						</span>
					)
				}
			)

			totalVolume += +differenceTradeVolume

			return (
				<tr key={index}>
					<td>{index + 1}</td>
					<td className="">
						<div className={`table-${clsTradeType} icon-pay-dots p-1`}>
							{item.tradeType}
							<img
								src={getUrlIcon("Asset", item.asset)}
								className="ml-1"
								alt="-"
								title={item.asset}
							/>
							{`${item.asset} / ${item.fiatUnit}`}
						</div>
					</td>
					<td className="tbl-header text-right">
						<span>
							{"≈ $ " +
								getPriceMasked(volumeUSDTsurplusAmount) +
								" | " +
								surplusAmount +
								" " +
								item.asset}
						</span>
						<span>
							{"≈ $ " +
								getPriceMasked(volumeUSDTinitAmount) +
								" | " +
								getPriceMasked(item.initAmount) +
								" " +
								item.asset}
						</span>
					</td>
					<td className="tbl-header">
						<span>{getPriceMasked(item.price)}</span>
						{item.priceFloatingRatio === null ? (
							<span>--</span>
						) : (
							<span className="text-success">
								{`${(+item.priceFloatingRatio - 100).toFixed(2)}%`}
							</span>
						)}
					</td>
					<td className="">
						<div>{paymentDots}</div>
						<span>
							{item.fiatSymbol +
								" " +
								replace000ToK(+item.minSingleTransAmount) +
								" - " +
								replace000ToK(+item.maxSingleTransAmount)}
						</span>
					</td>
					<td className="tbl-header">
						<span>{getTimeDate(item.createTime)}</span>
						<span>{getTimeDate(item.advUpdateTime)}</span>
					</td>
					<td className="tbl-header text-right">
						<span>{item.advNo}</span>
						<div>
							<label className="text-warning">{differenceByAllDays}</label>
							{" | $ "}
							<label className="text-success">
								{replace000ToK(differenceTradeVolume)}
							</label>
							{" | $ "}
							<label className="text-info">{replace000ToK(deltaPer30days)}</label>
						</div>
					</td>
				</tr>
			)
		})
	}

	return (
		<div className="container">
			<div className="row">
				<div>
					<span>{nickName}</span>
					<span>
						{merchantStatus && merchantStatus !== null
							? ` | (${merchantStatus})`
							: null}
					</span>
				</div>
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr>
								<th scope="col">#</th>
								<th scope="col" className="tbl-header">
									<span>Side | Ticker</span>
								</th>
								<th scope="col" className="tbl-header">
									<span>availableSumm</span>
									<span>tradeVolume</span>
								</th>
								<th scope="col" className="">
									Price | Dev, %
								</th>
								<th scope="col" className="">
									Payment Type
								</th>
								<th scope="col" className="">
									Created | Updated
								</th>
								<th scope="col" className="tbl-header text-right">
									<span>IdNumber</span>
									<span>Days | Volume $ | Δ $Vol/30days</span>
								</th>
							</tr>
						</thead>
						<tbody>{listOrders}</tbody>
						<tfoot>
							<tr>
								<td></td>
								<td>TotalVolume</td>
								<td colSpan={4}></td>
								<td className="text-right">$ {replace000ToK(totalVolume)}</td>
							</tr>
						</tfoot>
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
