import * as React from "react"
import Switch from "@material-ui/core/Switch"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faDownload } from "@fortawesome/free-solid-svg-icons"
import { STYLES } from "../constants"
import { IFilterUserOrders } from "../types"
import { startModalAlert } from "../common"

export const FilterUserOrders: React.FC<IFilterUserOrders> = props => {
	const {
		userId,
		updateOrders,
		arrOrderIds,
		objExchange,
		handlerUserProfile,
		getMerchantOrders,
		handlerPopupWindow,
		updateUser,
		insertOrderToDB,
	} = props

	// Универсальный объект параметров для getMerchantOrders
	const objParamsMerchantOrders = {
		page: 1, // "BN" "HB" "KX" "BT" "PX" "MG" "KC"
		rows: 20, // "BN" "PX" "KC"
		tradeType: "all", // "BN" "PX"
		asset: "all", // "BN" "PX"
		quantityPages: "40", // "BN" "PX" "KX"
		tokens: ["USDT", "BTC", "ETH", "USDC"], // "BT"
	}
	const classSwitcher = updateOrders ? "success" : "danger"

	return (
		<div className="container">
			<div className="d-flex justify-content-between mb-3">
				<div className="d-flex justify-content-start">
					<button
						className="btn btn-sm btn-info"
						type="button"
						id={`${objExchange.shortName}-getUserOrders-btn`}
						onClick={() => {
							const objParamOrders = {
								userId,
								exchangeId: objExchange.id,
								exchangeName: objExchange.name,
								shortName: objExchange.shortName,
								objParams: objParamsMerchantOrders,
							}
							getMerchantOrders(objParamOrders)
							// console.log(objParamOrders)
						}}
					>
						GetOrders
					</button>
					<button
						className="btn btn-sm btn-outline-warning"
						title="insertUserOrders"
						type="button"
						id={`${objExchange.shortName}-insertUserOrders-btn`}
						// disabled
						onClick={() => {
							if (arrOrderIds.length !== 0) {
								const objInsertDB = {
									userId,
									orders: arrOrderIds,
									// orders: ["1884961373625409536","1884969887309627392"],
									typeOrder: "MERCHANT",
									shortName: objExchange.shortName,
									exchangeId: objExchange.id,
								}
								insertOrderToDB(objInsertDB)
								// console.log(objInsertDB)
							} else {
								handlerPopupWindow(
									STYLES.WARNING,
									`${objExchange.name} arrOrderIds is empty`
								)
								startModalAlert()
							}
						}}
					>
						<FontAwesomeIcon icon={faDownload} />
					</button>
				</div>
				<div className="">
					<Switch
						checked={updateOrders}
						size="small"
						onChange={() => {
							handlerUserProfile(objExchange.name, "updateOrders", !updateOrders)
							const objUser = {
								exchange: objExchange.name,
								fieldChangeable: "updateOrders",
								id: userId,
								updateOrders: !updateOrders,
							}
							// обновляем данные в БД
							updateUser(objUser)
						}}
						color="secondary"
						name="switcher"
					/>
					<span className={`text-${classSwitcher} ml-2`}>
						{updateOrders ? "AutoUpdateOn" : "AutoUpdateOff"}
					</span>
				</div>
			</div>
		</div>
	)
}
