import * as React from "react"
import $ from "jquery"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faEdit, faInfoCircle } from "@fortawesome/free-solid-svg-icons"
import Scrollbar from "react-scrollbars-custom"
import { IListAllOrderStatus } from "../types"
import { CONSTANTS } from "../constants"
import { isSwitchedOnItem } from "../common"

export const ListAllTickers: React.FC<IListAllOrderStatus> = props => {
	const {
		dataConstants,
		scrollStyle,
		handlerFilterDetails,
		// updateItemDetails,
	} = props

	const { exchanges, statuses } = dataConstants

	const thListExchanges = exchanges.map((item: any, index: number) => {
		const elem = item.status ? (
			<th key={index} title={item.name}>
				{item.shortName}
			</th>
		) : null
		return elem
	})

	const listItems =
		statuses.length !== 0 ? (
			statuses.map((item: any, index: number) => {
				return (
					<tr key={index}>
						<td className="text-left">{index + 1}</td>
						<td className="text-left">
							<span className={`text-${item.colorStatus}`}>{item.status}</span>
						</td>
						{exchanges.map((exch: any, index: number) => {
							const obj = isSwitchedOnItem(item.values, exch.id)
							const elem = exch.status ? (
								<td key={index}>
									<span
										style={{ cursor: "pointer" }}
										title={`${exch.name} | switchedOn: ${obj.switchedOn}`}
									>
										{obj.isExists ? (
											<FontAwesomeIcon
												className={obj.switchedOn ? "text-success" : "text-warning"}
												icon={faInfoCircle}
												title="ON/OFF"
												onClick={() => {}}
											/>
										) : (
											"-"
										)}
									</span>
								</td>
							) : null
							return elem
						})}
						<td>
							<FontAwesomeIcon
								icon={faEdit}
								style={{ cursor: "pointer" }}
								className="text-warning"
								onClick={() => {
									$("#modal-editOrderStatus").modal("show")
									handlerFilterDetails("", "itemDetails", item)
									// console.log(item)
								}}
							/>
						</td>
					</tr>
				)
			})
		) : (
			<tr>
				<td colSpan={thListExchanges.length + 3}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		)
	return (
		<div className="row mt-3">
			<Scrollbar
				style={{
					...scrollStyle,
					height: scrollStyle.height,
				}}
			>
				<table className="table table-hover table-striped table-sm">
					<thead>
						<tr>
							<th className="text-left">#</th>
							<th className="text-left">
								<button
									disabled
									className="btn btn-outline-warning btn-sm ml-3"
									onClick={() => $("#modal-addOrderStatus").modal("show")}
								>
									Add OrderStatus
								</button>
							</th>
							{thListExchanges}
							<th>Edit</th>
						</tr>
					</thead>
					<tbody>{listItems}</tbody>
				</table>
			</Scrollbar>
		</div>
	)
}
