import * as React from "react"
import $ from "jquery"
import Switch from "@material-ui/core/Switch"
// import { STYLES, CONSTANTS } from "../constants"
import { ISettingsUser } from "../types"
import { startModalAlert } from "../common"
import { ListAllSubAccounts } from "../components"

export const SettingsUser: React.FC<ISettingsUser> = props => {
	const {
		userProfile,
		// userOrderStatuses,
		handlerUserProfile,
		updateUser,
		getGroupItems,
		checkOrderStatuses,
		handlerPopupWindow,
	} = props

	const storageProps = {
		switchOrders: false,
		insertOrders: true,
	}
	const [switchProps, handlerProps] = React.useState(storageProps)

	React.useEffect(() => {
		if (userProfile.auth && switchProps.switchOrders) {
			const idIntervalGetOrders = setInterval(() => {
				checkOrderStatuses({ userId: userProfile.id })
				// console.log("===================================")
			}, 90000)
			return () => clearInterval(idIntervalGetOrders)
		}
	}, [handlerPopupWindow, checkOrderStatuses, userProfile, switchProps])

	const classSwitcher = switchProps.switchOrders ? "success" : "danger"
	const classInsert = switchProps.insertOrders ? "success" : "danger"

	return (
		<div
			className="tab-pane fade"
			id="userSettingsProfile"
			role="tabpanel"
			aria-labelledby="userSettingsProfileTab"
		>
			<div className="row mt-3">
				<ul className="nav nav-pills mb-1" id="userSettingsTab" role="tablist">
					{/* otherSettings */}
					<li className="nav-item">
						<a
							className="nav-link active"
							id="otherSettingsTab"
							data-toggle="pill"
							href="#otherSettings"
							role="tab"
							aria-controls="otherSettings"
							aria-selected="true"
						>
							otherSettings
						</a>
					</li>
					{/* subAccountSettings*/}
					<li className="nav-item">
						<a
							className="nav-link"
							id="subAccountSettingsTab"
							data-toggle="pill"
							href="#subAccountSettings"
							role="tab"
							aria-controls="subAccountSettings"
							aria-selected="false"
						>
							SubAccount Settings
						</a>
					</li>
					{/* changePassUser */}
					<li className="nav-item">
						<a
							className="nav-link"
							id="changePassUserTab"
							data-toggle="pill"
							href="#changePassUser"
							role="tab"
							aria-controls="changePassUser"
							aria-selected="false"
							onClick={() => $("#modal-editPassUser").modal("show")}
						>
							changePassUser
						</a>
					</li>
					{/* editUserProfile */}
					<li className="nav-item">
						<a
							className="nav-link"
							id="editProfileUserTab"
							data-toggle="pill"
							href="#editProfileUser"
							role="tab"
							aria-controls="editProfileUser"
							aria-selected="false"
							onClick={() => $("#modal-editProfileUser").modal("show")}
						>
							editUserProfile
						</a>
					</li>
					{/* setUserPayMethods */}
					<li className="nav-item">
						<a
							className="nav-link"
							id="setUserPayMethodsTab"
							data-toggle="pill"
							href="#setUserPayMethods"
							role="tab"
							aria-controls="setUserPayMethods"
							aria-selected="false"
							onClick={() => $("#modal-editPayTypesUser").modal("show")}
						>
							setUserPayMethods
						</a>
					</li>
				</ul>
			</div>

			<div className="tab-content" id="userSettingsTabContent">
				{/* otherSettingsTab */}
				<div
					className="tab-pane fade show active"
					id="otherSettings"
					role="tabpanel"
					aria-labelledby="otherSettingsTab"
				>
					<div className="row mt-3">
						<ul
							// className="list-group text-left"
							className="text-left"
							style={{ listStyleType: "none" }}
						>
							{/* getAllOrders  insertAllOrders */}
							<li>
								<button
									className="btn btn-outline-danger btn-sm"
									onClick={() => {
										const objParams = {
											userId: userProfile.id,
											typeItems: "allOtcOrders",
										}
										getGroupItems(objParams)
									}}
								>
									All_OTC
								</button>
							</li>
							{/* switchOrders */}
							<li className="mt-3">
								<>
									<Switch
										checked={switchProps.switchOrders}
										size="small"
										onChange={() => {
											handlerProps({
												...switchProps,
												switchOrders: !switchProps.switchOrders,
											})
										}}
										color="secondary"
										name="switcher"
									/>
									<span className={`text-${classSwitcher} ml-2`}>
										{switchProps.switchOrders ? "AutoUpdateOn" : "AutoUpdateOff"}
									</span>
								</>
							</li>
							{/* insertOrders */}
							<li className="mt-3 mb-3">
								<>
									<Switch
										checked={switchProps.insertOrders}
										size="small"
										onChange={() => {
											handlerProps({
												...switchProps,
												insertOrders: !switchProps.insertOrders,
											})
										}}
										color="secondary"
										name="switcher"
									/>
									<span className={`text-${classInsert} ml-2`}>
										{switchProps.insertOrders ? "insertOrdersOn" : "insertOrdersOff"}
									</span>
								</>
							</li>
							<li>
								<div className="input-group mb-3">
									<input
										type="number"
										placeholder="Enter price adv sell"
										className="form-control"
										id="enterAdvSell"
										step="0.1"
										aria-describedby="enterAdvSell"
										value={userProfile.advSell == null ? "" : userProfile.advSell}
										onChange={(ev: any) => {
											handlerUserProfile("", "advSell", Number(ev.target.value))
										}}
									/>
									<div className="input-group-append">
										<button
											className="btn btn-outline-primary"
											type="button"
											// disabled
											id="btnAdvSell"
											onClick={() => {
												if ($("#enterAdvSell").val() === "") {
													// показываем предупреждение
													handlerPopupWindow("warning", "AdvSell cannot to be empty")
													// показываем popup
													startModalAlert()
												} else {
													const objUser = {
														fieldChangeable: "advSell",
														id: userProfile.id,
														advSell: userProfile.advSell,
													}
													// console.log(objUser)
													updateUser(objUser)
												}
											}}
										>
											Save AdvSell
										</button>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				{/* subAccountsSettingsTab */}
				<div
					className="tab-pane fade"
					id="subAccountSettings"
					role="tabpanel"
					aria-labelledby="subAccountSettingsTab"
				>
					<ListAllSubAccounts
						scrollStyle={{ height: 300, width: 40 }}
						handlerFilterDetails={() => {}}
					/>
				</div>
			</div>
		</div>
	)
}
