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 { IListAllCurrencies } from "../types"
import { CONSTANTS, CURRENCY_ICON_URL } from "../constants"
import { isSwitchedOnItem, switcherHandlerItem } from "../common"

export const ListAllCurrencies: React.FC<IListAllCurrencies> = props => {
	const {
		dataConstants,
		scrollStyle,
		handlerFilterDetails,
		updateItemDetails,
	} = props

	const { exchanges, currencies } = 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 currenciesList =
		currencies.length !== 0 ? (
			currencies.map((item: any, index: number) => {
				return (
					<tr key={index}>
						<td></td>
						<td className="text-left">{index + 1}</td>
						<td className="text-left">
							<span className="icon-pay-dots">
								<img
									src={`${CURRENCY_ICON_URL}${item.iconUrl}`}
									// src={item.iconUrl}
									className="mr-1"
									alt="-"
									title={item.currency}
								/>
								{item.currency}
							</span>
						</td>
						<td
							className={
								item.currencyType === "coin" ? "text-success" : "text-info"
							}
						>
							{item.currencyType}
						</td>
						{exchanges.map((exch: any, index: number) => {
							const obj = isSwitchedOnItem(item.currencyProps, 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={() => {
													const objItem = {
														itemFlag: "currencyItem",
														itemDetails: {
															...item,
															currencyId: item.id,
															currencyProps: switcherHandlerItem(
																item.currencyProps,
																exch.id
															),
														},
													}
													// console.log(objItem)
													updateItemDetails(objItem)
												}}
											/>
										) : (
											"-"
										)}
									</span>
								</td>
							) : null
							return elem
						})}
						<td>
							<FontAwesomeIcon
								icon={faEdit}
								style={{ cursor: "pointer" }}
								className="text-warning"
								onClick={() => {
									$("#modal-editCurrency").modal("show")
									handlerFilterDetails("", "itemDetails", item)
								}}
							/>
						</td>
					</tr>
				)
			})
		) : (
			<tr>
				<td colSpan={4}>{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">
								<button
									className="btn btn-outline-warning btn-sm ml-3"
									// disabled
									onClick={() => $("#modal-addNewCurrency").modal("show")}
								>
									Add Currency
								</button>
							</th>
							<th className="text-left">#</th>
							<th className="text-left">Currency</th>
							<th>Type</th>
							{thListExchanges}
							<th>Edit</th>
						</tr>
					</thead>
					<tbody>{currenciesList}</tbody>
				</table>
			</Scrollbar>
		</div>
	)
}
