import * as React from "react"
import Scrollbar from "react-scrollbars-custom"
import { getUrlIcon } from "../common"
import { IReportStatAnnualv2 } from "../types"

export const ReportStatAnnualv2: React.FC<IReportStatAnnualv2> = props => {
	const { scrollStyle, yearStatsV2 } = props
	const { sell, buy } = yearStatsV2

	const start = {
		stats: buy,
		isBuy: true,
		isTrades: false,
	}
	const [tableProps, handlerTableProps] = React.useState(start)

	const tradeSide = tableProps.isBuy ? "BUY" : "SELL"
	const sideClass = tableProps.isBuy ? "success" : "danger"
	const bgColorSide = tableProps.isBuy ? "lightgreen" : "pink"
	const pageName = tableProps.isTrades ? "Trades" : "Proceeds"
	const pageClass = tableProps.isTrades ? "info" : "warning"

	const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
	const tableHeadListItems = months.map((item: any, index: number) => {
		return (
			<th scope="col" key={index}>
				{new Date(`${item}`).toLocaleString("En", { month: "short" })}
			</th>
		)
	})

	let orderSummTotal = 0
	let tradeCountTotal = 0
	const handlerStatPropsFootTable = (stats: any, trFlag: string) => {
		const statProps: any = []
		for (let i = 0; i < stats.length; i++) {
			for (let j = 0; j < stats[i].props.length; j++) {
				statProps.push(stats[i].props[j])
			}
		}
		const result = months.map((item: any, index: any) => {
			const filteredProps = statProps.filter((prop: any) => {
				return (
					prop.month ===
					new Date(`${item}`).toLocaleString("En", { month: "short" })
				)
			})
			const sumItems =
				trFlag === "sumOrder"
					? filteredProps.reduce(
							(accum: any, p: any) => accum + +p.orderSumm,
							0
					  )
					: filteredProps.reduce(
							(accum: any, p: any) => accum + +p.tradeCount,
							0
					  )
			if (trFlag === "sumOrder") orderSummTotal += sumItems
			else tradeCountTotal += sumItems

			return <td key={index}>{sumItems}</td>
		})
		return result
	}

	const handlerStatPropsBodyTable = (statProps: any, trFlag: string) => {
		const result = months.map((item: any, index: any) => {
			const filteredProps = statProps.filter((prop: any) => {
				return (
					prop.month ===
					new Date(`${item}`).toLocaleString("En", { month: "short" })
				)
			})
			const trElem =
				trFlag === "sumOrder" ? (
					<td key={index}>
						{filteredProps.length !== 0 ? filteredProps[0].orderSumm : "--"}
					</td>
				) : (
					<td key={index}>
						{filteredProps.length !== 0 ? filteredProps[0].tradeCount : "-"}
					</td>
				)
			return trElem
		})
		return result
	}

	const tableBodyListItems =
		tableProps.stats.length !== 0
			? tableProps.stats.map((item: any, index: number) => {
					return (
						<tbody key={index}>
							{tableProps.isTrades ? (
								<tr>
									<td>
										<span className="icon-pay-dots">
											<img
												src={getUrlIcon("logoExchange", item.exchange)}
												className="mr-1"
												alt="-"
												title={item.exchange}
											/>
											{item.exchange}
										</span>
									</td>
									{handlerStatPropsBodyTable(item.props, "countOrder")}
									<td className="table-info">
										{item.props.reduce(
											(accum: any, p: any) => accum + +p.tradeCount,
											0
										)}
									</td>
								</tr>
							) : (
								<tr>
									<td>
										<span className="icon-pay-dots">
											<img
												src={getUrlIcon("logoExchange", item.exchange)}
												className="mr-1"
												alt="-"
												title={item.exchange}
											/>
											{item.exchange}
										</span>
									</td>
									{handlerStatPropsBodyTable(item.props, "sumOrder")}
									<td className="table-info">
										{item.props.reduce(
											(accum: any, p: any) => accum + +p.orderSumm,
											0
										)}
									</td>
								</tr>
							)}
						</tbody>
					)
			  })
			: null

	const tableFootListItems = tableProps.isTrades
		? handlerStatPropsFootTable(tableProps.stats, "countOrder")
		: handlerStatPropsFootTable(tableProps.stats, "sumOrder")

	return (
		<div className="container">
			<div className="row">
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr className="bg-dark text-white">
								<th scope="col">
									<span
										className={`text-${pageClass}`}
										style={{ cursor: "pointer" }}
										onClick={() => {
											handlerTableProps({
												...tableProps,
												stats: buy,
												isTrades: !tableProps.isTrades,
											})
										}}
									>
										{`${pageName}`}
									</span>
									{` | `}
									<span
										className={`text-${sideClass}`}
										style={{ cursor: "pointer" }}
										onClick={() => {
											handlerTableProps({
												...tableProps,
												stats: tableProps.isBuy ? sell : buy,
												isBuy: !tableProps.isBuy,
											})
										}}
									>
										{tradeSide}
									</span>
								</th>
								{tableHeadListItems}
								<th scope="col">Total</th>
							</tr>
						</thead>
						{tableBodyListItems}
						<tfoot>
							<tr style={{ backgroundColor: bgColorSide, color: "black" }}>
								<td style={{ fontWeight: "bold" }}>TOTAL:</td>
								{tableProps.stats.length !== 0
									? tableFootListItems
									: months.map((item: any, index: any) => {
											return <td key={index}></td>
									  })}
								<td>{tableProps.isTrades ? tradeCountTotal : orderSummTotal}</td>
							</tr>
						</tfoot>
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
