import * as React from "react"
import $ from "jquery"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
	faSignInAlt,
	faSignOutAlt,
	faExchangeAlt,
	faPeopleArrows,
	faCogs,
	faKey,
	faUnlockAlt,
	faStar,
	faAudioDescription,
	faBalanceScale,
	faChartLine,
	faCubes,
} from "@fortawesome/free-solid-svg-icons"
import { Loader } from "."
import { INavigationTabs } from "../types"
import { CONSTANTS, STYLES } from "../constants"
import { startModalAlert } from "../common"

import "../styles/UserPanel.css"

export const NavigationTabs: React.FC<INavigationTabs> = props => {
	const {
		userProfile,
		loading,
		postfix,
		logoutUser,
		loginUser,
		handlerPopupWindow,
	} = props

	// сброс/обработка подсветки активной кнопки
	const resetHighlightTab = () => {
		const elemsLink = $("#pills-tab-BN a")
		const elemsTabs = $("#pills-tabContent-BN").children()
		for (let i = 0; i < elemsLink.length; i++) {
			// удаляем .active со всех ссылок в группе
			$(elemsLink[i])
				.removeClass(`active`)
				.attr("aria-selected", "false")
			// удаляем .active со всех табов в группе
			$(elemsTabs[i]).removeClass(`active show`)
		}
		// добавляем .active on first element
		$(elemsLink[0])
			.addClass(`active`)
			.attr("aria-selected", "true")
		// добавляем .active on first tab-element
		$(elemsTabs[0]).addClass(`active show`)
	}

	const userNickName = userProfile.login.split("@")[0]

	return (
		<div className="container">
			<div className="row mb-3 navigation-panel">
				<ul
					className="nav nav-pills"
					id={`pills-tab-${postfix}`}
					role="tablist"
				>
					<li className="nav-item">
						<a
							className="nav-link active"
							id={`pills-orders-tab-${postfix}`}
							data-toggle="pill"
							href={`#pills-orders-${postfix}`}
							role="tab"
							aria-controls={`pills-orders-${postfix}`}
							aria-selected="true"
						>
							<FontAwesomeIcon
								size="lg"
								icon={faPeopleArrows}
								title="p2p-Orders"
							/>
						</a>
					</li>
					{userProfile.auth ? (
						<>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-ads-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-ads-${postfix}`}
									role="tab"
									aria-controls={`pills-ads-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon
										size="lg"
										icon={faAudioDescription}
										title="myAdvertisements"
									/>
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-myorders-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-myorders-${postfix}`}
									role="tab"
									aria-controls={`pills-myorders-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon
										size="lg"
										icon={faExchangeAlt}
										title="myOrders"
									/>
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-balances-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-balances-${postfix}`}
									role="tab"
									aria-controls={`pills-balances-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon
										size="lg"
										icon={faBalanceScale}
										title="myBalances"
									/>
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-favorites-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-favorites-${postfix}`}
									role="tab"
									aria-controls={`pills-favorites-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon size="lg" icon={faStar} title="Favorites" />
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-reports-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-reports-${postfix}`}
									role="tab"
									aria-controls={`pills-reports-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon size="lg" icon={faChartLine} title="Reports" />
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-settings-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-settings-${postfix}`}
									role="tab"
									aria-controls={`pills-settings-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon size="lg" icon={faCogs} title="Settings" />
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-services-tab-${postfix}`}
									data-toggle="pill"
									href={`#pills-services-${postfix}`}
									role="tab"
									aria-controls={`pills-services-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon size="lg" icon={faCubes} title="Services" />
								</a>
							</li>
						</>
					) : (
						<>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-reg-${postfix}`}
									data-toggle="pill"
									href={`#pills-reg-${postfix}`}
									role="tab"
									aria-controls={`pills-reg-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon
										size="lg"
										icon={faKey}
										title="Registration"
										onClick={() => $("#modal-addUser").modal("show")}
									/>
								</a>
							</li>
							<li className="nav-item">
								<a
									className="nav-link"
									id={`pills-pass-${postfix}`}
									data-toggle="pill"
									href={`#pills-pass-${postfix}`}
									role="tab"
									aria-controls={`pills-pass-${postfix}`}
									aria-selected="false"
								>
									<FontAwesomeIcon
										size="lg"
										icon={faUnlockAlt}
										title="Forgot Password"
										onClick={() => $("#modal-reset").modal("show")}
									/>
								</a>
							</li>
						</>
					)}
				</ul>

				<div style={{ position: "relative", top: "5px", width: "50px" }}>
					<Loader loading={loading} />
				</div>

				<div className="nav">
					{userProfile.auth ? (
						<div className="auth-true">
							<div className="row">
								{logoutUser ? (
									<div className="col-auto mt-2">
										{userNickName}
										<button
											className="btn btn-outline-warning btn-sm ml-3"
											type="button"
											title="LogOut"
											id="logOut"
											onClick={() => {
												logoutUser(userProfile.token)
												resetHighlightTab()
											}}
										>
											<FontAwesomeIcon size="lg" icon={faSignOutAlt} />
										</button>
									</div>
								) : null}
							</div>
						</div>
					) : (
						<div className="auth-false">
							{loginUser && handlerPopupWindow ? (
								<div className="input-group input-group-sm">
									<input
										type="email"
										className="form-control form-control-sm"
										id="userEmail"
										placeholder="name@name.com"
									/>
									<input
										type="password"
										className="form-control form-control-sm"
										id="userPass"
									/>
									<div className="input-group-append">
										<button
											className="btn btn-outline-success btn-sm"
											type="button"
											title="LogIn"
											id="logIn"
											onClick={() => {
												const login = $("#userEmail").val()
												const pass = $("#userPass").val()
												if (login !== "" && pass !== "") {
													const objUser = { login, pass }
													loginUser(objUser)
													resetHighlightTab()
													$("#userEmail").val("")
													$("#userPass").val("")
												} else {
													handlerPopupWindow(STYLES.WARNING, CONSTANTS.FIELDS_FULL)
													startModalAlert()
												}
											}}
										>
											<FontAwesomeIcon size="lg" icon={faSignInAlt} />
										</button>
									</div>
								</div>
							) : null}
						</div>
					)}
				</div>
			</div>
		</div>
	)
}
