import React from "react"
import Scrollbar from "react-scrollbars-custom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
	faDownload,
	faHourglassHalf,
	faPercent,
	faRocket,
	faSortAmountUp,
	faSortAmountDownAlt,
} from "@fortawesome/free-solid-svg-icons"
import { IAdditionalServices } from "../types"
import { CONSTANTS } from "../constants"

export const AdditionalServices: React.FC<IAdditionalServices> = props => {
	const {
		userId,
		getDataTickers,
		getFundingRates,
		fundingRates,
		scrollStyle,
	} = props

	const startState = {
		timeVisible: false,
		sorting: { sortName: "BN", sortStatus: false, sortType: "up" },
	}

	const [stateProps, handlerState] = React.useState(startState)

	const getTimeFunc = (nextFundingTime: any) => {
		let msgTime = "-"
		if (!isNaN(nextFundingTime)) {
			const duration: any = nextFundingTime - Date.now()
			let seconds: any = (duration / 1000) % 60
			let minutes: any = (duration / (1000 * 60)) % 60
			let hours: any = (duration / (1000 * 60 * 60)) % 24

			hours = hours < 10 ? "0" + hours : hours
			minutes = minutes < 10 ? "0" + minutes : minutes
			seconds = seconds < 10 ? "0" + seconds : seconds

			msgTime =
				// tslint:disable-next-line: radix
				parseInt(hours) + ":" + parseInt(minutes) + ":" + parseInt(seconds)
		}
		return msgTime
	}

	const getRateProps = (arr: any, name: any) => {
		const result: any = { currentRate: 0, predictedRate: 0, nextTime: 0 }
		for (let k = 0; k < arr.length; k++) {
			if (arr[k].exchangeName === name) {
				result.cR = isNaN(+arr[k].rate) ? 0 : +arr[k].rate.toFixed(4)
				result.pR = arr[k].predictedRate
				result.nextTime = getTimeFunc(arr[k].nextFundingTime)
			}
		}
		return result
	}

	const getArraySorted = (arr: any, sortObj: any) => {
		const { sortName, sortStatus, sortType } = sortObj
		const arraySorted = arr.sort((a: any, b: any) => {
			if (sortStatus) {
				if (sortName !== "Symbol" && sortType === "up") {
					if (Number(a[sortName].cR) > Number(b[sortName].cR)) return -1
					if (Number(a[sortName].cR) < Number(b[sortName].cR)) return 1
				} else if (sortName !== "Symbol" && sortType === "down") {
					if (Number(a[sortName].cR) < Number(b[sortName].cR)) return -1
					if (Number(a[sortName].cR) > Number(b[sortName].cR)) return 1
				} else if (sortName === "Symbol" && sortType === "up") {
					if (a.symbol > b.symbol) return -1
					if (a.symbol < b.symbol) return 1
				} else if (sortName === "Symbol" && sortType === "down") {
					if (a.symbol < b.symbol) return -1
					if (a.symbol > b.symbol) return 1
				}
			}
			return 0
		})
		return arraySorted
	}

	const getClassName = (rate: any) => {
		const prefix = "table-"
		const c1 = "danger"
		const c2 = "success"
		let classNameStyle = prefix
		if (+rate > 0) classNameStyle = prefix + c1
		else if (+rate < 0) classNameStyle = prefix + c2
		return classNameStyle
	}

	// const sortIconStyle = { marginLeft: "5px", cursor: "pointer" }
	const namesTH = [
		"Symbol",
		"BN",
		"HB",
		"KX",
		"BT",
		"MG",
		"KC",
		"GT",
		"BG",
		"CN",
		"BX",
		"XT",
	]

	const listRates =
		fundingRates.length === 0 ? (
			<tr>
				<td colSpan={8}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		) : (
			fundingRates.map((item: any, index: number) => {
				return (
					<tr key={index}>
						<td>{index + 1}</td>
						<td className="text-left" style={{ width: "120px" }}>
							{item.exchange}
						</td>
						<td className="text-left" style={{ width: "120px" }}>
							{item.typeMarket}
						</td>
						<td>{item.bidPrice}</td>
						<td>{item.askPrice}</td>
						<td>{item.baseAsset}</td>
						<td>{item.quoteAsset}</td>
						<td>{(item.fundRate * 100).toFixed(4)}</td>
					</tr>
				)
			})
		)

	return (
		<div className="container">
			<div className="row">
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr>
								<th>#</th>
								<th scope="col" className="text-left">
									<button
										className="btn btn-outline-warning btn-sm"
										title="getDataTickers"
										// disabled
										onClick={() => {
											const objParams = { userId, arrExchanges: [] }
											getDataTickers(objParams)
										}}
									>
										<FontAwesomeIcon icon={faRocket} />
									</button>
									<button
										className="btn btn-outline-success btn-sm"
										title="getFundingRates(userId)"
										onClick={() => {
											const objParams = { userId, arrExchanges: [] }
											getFundingRates(objParams)
										}}
									>
										<FontAwesomeIcon icon={faDownload} />
									</button>
									<button
										className={`btn btn-outline-${
											stateProps.timeVisible ? "info" : "danger"
										} btn-sm`}
										title="timeVisible"
										onClick={() => {
											handlerState({
												...stateProps,
												timeVisible: !stateProps.timeVisible,
											})
										}}
									>
										{stateProps.timeVisible ? (
											<FontAwesomeIcon icon={faPercent} />
										) : (
											<FontAwesomeIcon icon={faHourglassHalf} />
										)}
									</button>
								</th>
								<th scope="col">Market</th>
								<th>BuyPrice</th>
								<th>SellPrice</th>
								<th style={{ cursor: "pointer" }} className="">
									baseAsset
								</th>
								<th>quoteAsset</th>
								<th style={{ cursor: "pointer" }} className="">
									fundRate
								</th>
							</tr>
						</thead>
						<tbody>{listRates}</tbody>
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
