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

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

	const { exchanges, paytypes } = 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 =
		paytypes.length !== 0 ? (
			paytypes.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("iconPaymentByID", item.id)}
									className="mr-1"
									alt="-"
									title={item.payType}
								/>
								{item.payType}
							</span>
						</td>
						{exchanges.map((exch: any, index: number) => {
							const obj = isSwitchedOnItem(item.payTypeProps, 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: "paymentItem",
														itemDetails: {
															...item,
															payTypeId: item.id,
															payTypeProps: switcherHandlerItem(
																item.payTypeProps,
																exch.id
															),
														},
													}
													// console.log(objItem)
													updateItemDetails(objItem)
												}}
											/>
										) : (
											"-"
										)}
									</span>
								</td>
							) : null
							return elem
						})}
						<td>
							<FontAwesomeIcon
								icon={faEdit}
								style={{ cursor: "pointer" }}
								className="text-warning"
								onClick={() => {
									$("#modal-editPayType").modal("show")
									handlerFilterDetails("", "itemDetails", 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
									className="btn btn-outline-warning btn-sm ml-3"
									// disabled
									onClick={() => $("#modal-addNewPayType").modal("show")}
								>
									Add PayType
								</button>
							</th>
							{thListExchanges}
							<th>Edit</th>
						</tr>
					</thead>
					<tbody>{listItems}</tbody>
				</table>
			</Scrollbar>
		</div>
	)
}
