import * as React from "react"
import $ from "jquery"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons"
import { getUserPropsByExchange } from "../common"
import { ICounterPanel } from "../types"
import { CounterOrders } from "."
import "../styles/OrdersPanel.css"

export const CounterPanel: React.FC<ICounterPanel> = props => {
	const { userProfile, loading, exchanges } = props

	const [isSound, handlerSound] = React.useState(false)
	const [isVisible, handlerVisible] = React.useState(false)
	const activeClass = isVisible ? "activeItem" : "inActiveItem"

	// Получение отфильтрованного массива exchanges by status
	const exchangesFiltered = exchanges.filter((item: any) => {
		return item.status
	})

	const arrParams = exchangesFiltered.map((item: any, index: number) => {
		const userProps = getUserPropsByExchange(
			item.id,
			userProfile.userProperties
		)
		return {
			shortName: item.shortName,
			merchantOrders: userProps.merchantOrders,
			soundAlert: userProps.soundAlert,
		}
	})

	const statuses = [
		"Expired",
		"Cancelled",
		"Appealing",
		"Completed",
		"Paid",
		"Unpaid",
		// "Created", // GX, BZ, XG, CN
	]

	const listCounterOrders = arrParams.map((item: any, index: number) => {
		return (
			<CounterOrders
				key={index}
				prefix={item.shortName}
				orders={item.merchantOrders}
				loading={loading}
				orderStatus={"Unpaid"}
				statuses={statuses}
				soundAlert={item.soundAlert}
				isSound={isSound}
				handlerSound={handlerSound}
			/>
		)
	})

	return (
		<>
			<div id="counter-switcher" className="exchanges-item">
				<span
					title="Switcher"
					className={activeClass}
					onClick={() => {
						handlerVisible(!isVisible)
						$("#counterOrders").toggle("slow")
					}}
				>
					<FontAwesomeIcon icon={isVisible ? faEye : faEyeSlash} />
				</span>
			</div>

			<div
				className="block-panel"
				id="counterOrders"
				style={{ display: "none" }}
			>
				{listCounterOrders}
			</div>
		</>
	)
}
