import * as React from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
	faExternalLinkAlt,
	faCloudDownloadAlt,
	// faStar,
	faUserAltSlash,
} from "@fortawesome/free-solid-svg-icons"
import { IUserFavorites } from "../types"
import { getUserPropertyByExchange } from "../common"
import { CONSTANTS } from "../constants"

export const UserFavorites: React.FC<IUserFavorites> = props => {
	const {
		userProfile,
		objExchange,
		handlerUserProfile,
		getMerchantDetails,
		updateUser,
	} = props

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

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

	// проверка существования item
	const checkItemIs = (digit: number, item: any) => {
		let result = "--"
		if (item) result = item.toFixed(digit)
		return result
	}

	const favorites = getUserPropertyByExchange(
		"favorites",
		name,
		userProfile.userProperties
	)

	if (favorites && favorites.length !== 0) {
		listItems = favorites.map((item: any, index: number) => {
			return (
				<tr key={index}>
					<td>{index + 1}</td>
					<td className="text-left">
						<a
							href={merchantDetail + item.userId}
							target="_blank"
							rel="noopener noreferrer"
							className="text-warning mr-1"
							title={`${item.nickName} Detals`}
						>
							<FontAwesomeIcon icon={faExternalLinkAlt} />
						</a>
						{/* <FontAwesomeIcon className="text-success mr-2" icon={faStar} /> */}
						<FontAwesomeIcon
							style={{ cursor: "pointer" }}
							className="text-danger mr-2"
							title="remove from Favorites"
							icon={faUserAltSlash}
							onClick={() => {
								handlerUserProfile(name, "removeItemFavorites", item.userId)
								const objUser = {
									exchange: name,
									fieldChangeable: "removeFavorite",
									id: userProfile.id,
									// lang: userProfile.lang,
									// theme: userProfile.theme,
									// exchangeUserId: getUserProperties(
									// 	"exchangeUserId",
									// 	activeExchange,
									// 	userProfile.userProperties
									// ),
									// userNickName: getUserProperties(
									// 	"userNickName",
									// 	activeExchange,
									// 	userProfile.userProperties
									// ),
									// payTypeList: getUserProperties(
									// 	"payTypeList",
									// 	activeExchange,
									// 	userProfile.userProperties
									// ),
									favoriteUser: {
										nickName: item.nickName,
										userId: item.userId,
									},
								}
								updateUser(objUser)
							}}
						/>
						<FontAwesomeIcon
							style={{ cursor: "pointer" }}
							className="text-warning mr-2"
							title="get user's Advs"
							icon={faCloudDownloadAlt}
							onClick={() => {
								const objMerchant = {
									userId: userProfile.id,
									exchangeId: id,
									exchangeName: name,
									shortName,
									merchantId: item.userId,
								}
								getMerchantDetails(objMerchant)
							}}
						/>
						<span>{item.nickName.slice(0, 15)}</span>
					</td>
					{/* <td>
						{item.authentication === null ? "null" : "-"}|
						{item.emailVerified ? "+" : "-"}|{item.bindMobile ? "+" : "-"}|
						{item.idVerified ? "+" : "-"}|
						{item.onlineStatus === null ? "null" : item.onlineStatus}
					</td> */}
					<td>
						{item.registerDays} | {item.firstOrderDays} |{" "}
						{(item.finishRateLatest30day * 100).toFixed(1)}% |{" "}
						{checkItemIs(2, item.avgReleaseTimeOfLatest30day / 60)} |{" "}
						{checkItemIs(2, item.avgPayTimeOfLatest30day / 60)}
					</td>
					<td>
						{item.completedBuyOrderNumOfLatest30day} |{" "}
						{item.completedSellOrderNumOfLatest30day} |{" "}
						{item.completedOrderNumOfLatest30day} |{" "}
						{checkItemIs(3, item.completedOrderTotalBtcAmountOfLatest30day)}
					</td>
					<td>
						{item.completedBuyOrderNum} | {item.completedSellOrderNum} |{" "}
						{item.completedOrderNum}
					</td>
					<td>
						{(item.completedOrderNumOfLatest30day / 30).toFixed(1)} |{" "}
						{(item.completedOrderNum / item.firstOrderDays).toFixed(1)}
					</td>
					<td>
						{checkItemIs(1, item.completedBuyOrderTotalBtcAmount)} |{" "}
						{checkItemIs(1, item.completedSellOrderTotalBtcAmount)} |{" "}
						{checkItemIs(1, item.completedOrderTotalBtcAmount)}
					</td>
				</tr>
			)
		})
	}

	return (
		<div className="container">
			<div className="row">
				<table className="table table-hover table-striped table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th className="text-left">nickName</th>
							{/* <th
								className=""
								data-toggle="tooltip"
								data-placement="top"
								title="MerchantStatus | emailVerified | bindTelephon | idVerified | onlineStatus"
							>
								 M | E | T | Id | S 
							</th> */}
							<th
								className=""
								data-toggle="tooltip"
								data-placement="top"
								title="registerDays | firstOrderDays | % RateLatest30day | avgReleaseTime | avgPayTime"
							>
								Reg | Fst | Rate | RelTime | PayTime
							</th>
							<th
								className="tbl-header"
								data-toggle="tooltip"
								data-placement="top"
								title="BuyOrder | SellOrder | TotalOrder | BTC"
							>
								<span>Latest30day</span>
								<span>Buy | Sell | Total | BTC</span>
							</th>
							<th
								className="tbl-header"
								data-toggle="tooltip"
								data-placement="top"
								title="BuyOrder | SellOrder | TotalOrder | BTC"
							>
								<span>AllTimeOrders</span>
								<span>Buy | Sell | Total</span>
							</th>
							<th
								className="tbl-header"
								data-toggle="tooltip"
								data-placement="top"
								title="Average orders 30Days/AllTimes"
							>
								<span>Average Orders</span>
								<span>30Days|AllTimes</span>
							</th>
							<th
								className="tbl-header"
								data-toggle="tooltip"
								data-placement="top"
								title="BuyOrder | SellOrder | TotalOrder"
							>
								<span>AllTimeBTC</span>
								<span>Buy | Sell | Total, BTC</span>
							</th>
						</tr>
					</thead>
					<tbody>{listItems}</tbody>
				</table>
			</div>
		</div>
	)
}
