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

export const ListAllExchanges: React.FC<IListAllExchanges> = props => {
	const { dataConstants, scrollStyle, handlerFilterDetails } = props

	const { exchanges } = dataConstants

	const listItems =
		exchanges.length !== 0 ? (
			exchanges.map((item: any, index: number) => {
				return (
					<tr key={index}>
						<td className="text-left">{index + 1}</td>
						<td className="text-left">
							<span className="icon-pay-dots">
								<img
									src={getUrlIcon("logoExchange", item.shortName)}
									className="mr-1"
									alt="-"
									title={item.name}
								/>
								{item.name}
							</span>
						</td>
						<td>{`${item.shortName}`}</td>
						<td>{`****${item.id.slice(-5)}`}</td>
						<td>
							{item.status ? (
								<span className="text-success">on</span>
							) : (
								<span className="text-danger">off</span>
							)}
						</td>
						<td>
							<FontAwesomeIcon
								icon={faEdit}
								style={{ cursor: "pointer" }}
								className="text-warning"
								onClick={() => {
									$("#modal-editExchange").modal("show")
									handlerFilterDetails("", "itemDetails", item)
								}}
							/>
						</td>
						<td>--</td>
					</tr>
				)
			})
		) : (
			<tr>
				<td colSpan={6}>{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">
								<span className="mr-1">P2P-Service</span>
								<button
									className="btn btn-outline-warning btn-sm ml-3"
									// disabled
									onClick={() => $("#modal-addNewExchange").modal("show")}
								>
									Add Exchange
								</button>
							</th>
							<th>shortName</th>
							<th>exchangeId</th>
							<th>Status</th>
							<th>Edit</th>
							<th>Comment | Note</th>
						</tr>
					</thead>
					<tbody>{listItems}</tbody>
				</table>
			</Scrollbar>
		</div>
	)
}
