import * as React from "react"
import { IReportPanel } from "../types"
import { CONSTANTS, STYLES } from "../constants"
import {
	ReportStatSPOT,
	ReportStatMonth,
	ReportStatAnnualv1,
	ReportStatAnnualv2,
	ReportStatAnnualv3,
	ReportBalances,
	ReportTotalSumm,
	ReportCost,
	ReportCostNew,
	ReportAllUserOrders,
	ReportAllSpotOrders,
} from "."
import {
	startModalAlert,
	getValuationUSDT,
	getPriceMasked,
	// getNameAssetsByTicker,
} from "../common"

export const ReportPanel: React.FC<IReportPanel> = props => {
	const {
		reportMerchantOrders,
		reportSpotOrders,
		reportBalances,
		reportStats,
		reportCost,
		dataConstants,
		currentCourses,
		userProfile,
		scrollStyle,
		getGroupItems,
		// getHistorySpotOrders,
		// getActiveSpotOrders,
		handlerFilterDetails,
		handlerPopupWindow,
		getEditableOrder,
	} = props

	const endTime = new Date().getTime()
	const startTime = endTime - 60000 * 60 * 24 * 60 // 60 days
	const activeExchanges = dataConstants.exchanges.filter((item: any) => {
		const qqq = item.status ? item : null
		return qqq
	})

	const getSpotsConcated = (props: any) => {
		const result: any = []
		for (let i = 0; i < props.length; i++) {
			result.push(...props[i].spotOrders)
		}
		return result
	}
	const getSummOrders = (typeOrder: string, fiat: string, orders: any) => {
		let summ = 0
		if (typeOrder === "OTC" && fiat === "RUB") {
			summ = orders.reduce(
				(accumulator: any, item: any) => accumulator + +item.amount,
				0
			)
		} else if (typeOrder === "OTC" && fiat === "USD") {
			summ = orders.reduce(
				(accumulator: any, item: any) =>
					accumulator +
					+getValuationUSDT(currentCourses, item.asset, item.volume),
				0
			)
		} else if (typeOrder === "SPOT" && fiat === "RUB") {
		} else if (typeOrder === "SPOT" && fiat === "USD") {
			for (let i = 0; i < orders.length; i++) {
				const quoteAsset = orders[i].quoteAsset
				const summOrder = +orders[i].volume * +orders[i].price
				const summOrderUSDT =
					quoteAsset === "RUB" ? +orders[i].volume : summOrder
				summ += +summOrderUSDT
			}
		}
		return summ
	}

	const activeSpotOrders = getSpotsConcated(userProfile.userProperties)

	const otcOrdersInfo = {
		quantity: reportMerchantOrders.length,
		summRUB:
			reportMerchantOrders.length === 0
				? 0
				: getSummOrders("OTC", "RUB", reportMerchantOrders),
		summUSD:
			reportMerchantOrders.length === 0
				? 0
				: getSummOrders("OTC", "USD", reportMerchantOrders),
	}
	const spotOrdersInfo = {
		quantity: reportSpotOrders.length,
		summRUB: 0,
		summUSD:
			reportSpotOrders.length === 0
				? 0
				: getSummOrders("SPOT", "USD", reportSpotOrders),
	}

	return (
		<div className="container">
			<div className="row d-flex justify-content-between">
				<ul className="nav nav-pills mb-3" id="reportTabs" role="tablist">
					<li className="nav-item">
						<a
							className="nav-link active"
							id="merchantOrdersTab"
							data-toggle="pill"
							href="#merchantOrders"
							role="tab"
							aria-controls="merchantOrders"
							aria-selected="true"
						>
							Merchant Orders
						</a>
					</li>
					<li className="nav-item">
						<a
							className="nav-link"
							id="spotOrdersTab"
							data-toggle="pill"
							href="#spotOrders"
							role="tab"
							aria-controls="spotOrders"
							aria-selected="false"
						>
							Spot Orders
						</a>
					</li>
					<li className="nav-item">
						<a
							className="nav-link"
							id="balancesTab"
							data-toggle="pill"
							href="#balances"
							role="tab"
							aria-controls="balances"
							aria-selected="false"
						>
							Balances
						</a>
					</li>
					<li className="nav-item">
						<a
							className="nav-link"
							id="totalSummTab"
							data-toggle="pill"
							href="#totalSumm"
							role="tab"
							aria-controls="totalSumm"
							aria-selected="false"
						>
							TotalSumm
						</a>
					</li>
					<li className="nav-item">
						<a
							className="nav-link"
							id="costTab"
							data-toggle="pill"
							href="#cost"
							role="tab"
							aria-controls="cost"
							aria-selected="false"
						>
							Cost Calculating
						</a>
					</li>
					<li className="nav-item">
						<a
							className="nav-link"
							id="costTabNew"
							data-toggle="pill"
							href="#costNew"
							role="tab"
							aria-controls="cost"
							aria-selected="false"
						>
							CostNew
						</a>
					</li>
				</ul>
			</div>
			<div className="tab-content" id="reportTabsContent">
				{/* ReportUserOrders */}
				<div
					className="tab-pane fade show active"
					id="merchantOrders"
					role="tabpanel"
					aria-labelledby="merchantOrdersTabs"
				>
					<div
						className="row mb-3 d-flex justify-content-between"
						style={{ height: "35px" }}
					>
						<ul id="merchantOrdersTabs" className="nav nav-pills" role="tablist">
							<li className="nav-item">
								<a
									className="nav-link"
									id="monthStatOrders"
									data-toggle="pill"
									href="#monthStatOrdersTab"
									role="tab"
									aria-controls="monthStatOrdersTab"
									aria-selected="true"
								>
									Stats v_0.0
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id="annualStats"
									data-toggle="pill"
									href="#annualStatsTab"
									role="tab"
									aria-controls="annualStatsTab"
									aria-selected="true"
								>
									Stats v_1.0
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link active"
									id="annual-2_Stats"
									data-toggle="pill"
									href="#annual-2_StatsTab"
									role="tab"
									aria-controls="annual-2_StatsTab"
									aria-selected="true"
								>
									Stats v_2.0
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id="annual-3_Stats"
									data-toggle="pill"
									href="#annual-3_StatsTab"
									role="tab"
									aria-controls="annual-3_StatsTab"
									aria-selected="true"
								>
									Stats v_3.0
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id="otcOrders"
									data-toggle="pill"
									href="#otcOrdersTab"
									role="tab"
									aria-controls="otcOrdersTab"
									aria-selected="false"
								>
									Orders
								</a>
							</li>
						</ul>
						<div className="" style={{ marginTop: "5px" }}>
							{`Qty merchant: ${otcOrdersInfo.quantity} | `}
							{`Summ merchant: ${getPriceMasked(
								otcOrdersInfo.summRUB
							)} RUB | ${getPriceMasked(otcOrdersInfo.summUSD)} USD`}
						</div>
					</div>
					<div className="tab-content" id="merchantOrdersTabsContent">
						<div
							className="tab-pane fade"
							id="annualStatsTab"
							role="tabpanel"
							aria-labelledby="annualStats"
						>
							<ReportStatAnnualv1
								yearStatsV1={reportStats.yearStatsV1}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
							/>
						</div>
						<div
							className="tab-pane fade show active"
							id="annual-2_StatsTab"
							role="tabpanel"
							aria-labelledby="annual-2_Stats"
						>
							<ReportStatAnnualv2
								yearStatsV2={reportStats.yearStatsV2}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
							/>
						</div>
						<div
							className="tab-pane fade"
							id="annual-3_StatsTab"
							role="tabpanel"
							aria-labelledby="annual-3_Stats"
						>
							<ReportStatAnnualv3
								yearStatsV3={reportStats.yearStatsV3}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
							/>
						</div>
						<div
							className="tab-pane fade"
							id="monthStatOrdersTab"
							role="tabpanel"
							aria-labelledby="monthStatOrders"
						>
							<ReportStatMonth
								activeExchanges={activeExchanges}
								monthStats={reportStats.monthStats}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
							/>
						</div>
						<div
							className="tab-pane fade"
							id="otcOrdersTab"
							role="tabpanel"
							aria-labelledby="otcOrders"
						>
							<ReportAllUserOrders
								merchantOrders={reportMerchantOrders}
								currentCourses={currentCourses}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
								userId={userProfile.id}
								getEditableOrder={getEditableOrder}
							/>
						</div>
					</div>
				</div>
				{/* ReportSpotOrders */}
				<div
					className="tab-pane fade"
					id="spotOrders"
					role="tabpanel"
					aria-labelledby="spotOrdersTabs"
				>
					<div className="row mb-3 d-flex justify-content-between">
						<ul id="spotOrdersTabs" className="nav nav-pills" role="tablist">
							<li className="nav-item">
								<a
									className="nav-link"
									id="historySpotOrdersTab"
									data-toggle="pill"
									href="#tableHistorySpotOrders"
									role="tab"
									aria-controls="tableHistorySpotOrders"
									aria-selected="true"
								>
									History Spot Orders
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link active"
									id="activeSpotOrdersTab"
									data-toggle="pill"
									href="#tableActiveSpotOrders"
									role="tab"
									aria-controls="tableActiveSpotOrders"
									aria-selected="true"
								>
									Active Spot Orders
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id="spotStatOrders"
									data-toggle="pill"
									href="#spotStatOrdersTab"
									role="tab"
									aria-controls="spotStatOrdersTab"
									aria-selected="true"
								>
									SPOT Stats
								</a>
							</li>
						</ul>
						<div className="">
							<button
								className="btn btn-outline-success btn-sm"
								onClick={() => {
									if (startTime === null || endTime === null) {
										handlerPopupWindow(STYLES.WARNING, CONSTANTS.DATE_CONDITIONS_1)
										startModalAlert()
									} else if (startTime >= endTime) {
										handlerPopupWindow(STYLES.WARNING, CONSTANTS.DATE_CONDITIONS_2)
										startModalAlert()
									} else {
										const objParams = {
											userId: userProfile.id,
											typeItems: "allHistorySpotOrders",
										}
										getGroupItems(objParams)
									}
								}}
							>
								History Spot Orders
							</button>
							<button
								className="btn btn-outline-info btn-sm"
								onClick={() => {
									const objParams = {
										userId: userProfile.id,
										typeItems: "allActiveSpotOrders",
									}
									getGroupItems(objParams)
								}}
							>
								Active Spot Orders
							</button>
						</div>
						<div className="" style={{ marginTop: "5px" }}>
							{`Qty spot: ${spotOrdersInfo.quantity} | `}
							{`Summ spot: ${getPriceMasked(spotOrdersInfo.summUSD)} USD`}
						</div>
					</div>
					<div className="tab-content" id="spotOrdersTabsContent">
						<div
							className="tab-pane fade"
							id="tableHistorySpotOrders"
							role="tabpanel"
							aria-labelledby="historySpotOrdersTab"
						>
							<ReportAllSpotOrders
								typeSpotOrder="history"
								spotOrders={reportSpotOrders}
								currentCourses={currentCourses}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
							/>
						</div>
						<div
							className="tab-pane fade show active"
							id="tableActiveSpotOrders"
							role="tabpanel"
							aria-labelledby="activeSpotOrdersTab"
						>
							<ReportAllSpotOrders
								typeSpotOrder="active"
								spotOrders={activeSpotOrders}
								currentCourses={currentCourses}
								scrollStyle={{
									height: scrollStyle.height - 100,
									width: scrollStyle.width,
								}}
							/>
						</div>
						<div
							className="tab-pane fade"
							id="spotStatOrdersTab"
							role="tabpanel"
							aria-labelledby="spotStatOrders"
						>
							<ReportStatSPOT
								activeExchanges={activeExchanges}
								reportSpotOrders={reportSpotOrders}
							/>
						</div>
					</div>
				</div>
				{/* ReportBalances */}
				<div
					className="tab-pane fade"
					id="balances"
					role="tabpanel"
					aria-labelledby="balancesTab"
				>
					<ReportBalances
						reportBalances={reportBalances}
						scrollStyle={scrollStyle}
					/>
				</div>
				{/* ReportTotalSumm */}
				<div
					className="tab-pane fade"
					id="totalSumm"
					role="tabpanel"
					aria-labelledby="totalSummTab"
				>
					<ReportTotalSumm
						userProfile={userProfile}
						dataConstants={dataConstants}
						currentCourses={currentCourses}
						scrollStyle={{
							height: scrollStyle.height - 100,
							width: scrollStyle.width,
						}}
						getGroupItems={getGroupItems}
						handlerPopupWindow={handlerPopupWindow}
						handlerFilterDetails={handlerFilterDetails}
					/>
				</div>
				{/* ReportCost */}
				<div
					className="tab-pane fade"
					id="cost"
					role="tabpanel"
					aria-labelledby="costTab"
				>
					<ReportCost
						reportSpotOrders={reportSpotOrders}
						reportMerchantOrders={reportMerchantOrders}
						activeSpotOrders={activeSpotOrders}
					/>
				</div>
				{/* ReportCostNew */}
				<div
					className="tab-pane fade"
					id="costNew"
					role="tabpanel"
					aria-labelledby="costTab"
				>
					<ReportCostNew
						reportCost={reportCost}
						scrollStyle={{
							height: scrollStyle.height - 100,
							width: scrollStyle.width,
						}}
					/>
				</div>
			</div>
		</div>
	)
}
