export class ServerAuth {
	constructor (address, port, tlsEnabled) {
		this.address = address;
		this.port = port;
		this.isTLSenabled = !!tlsEnabled;
	}
	
	getAuth () {
		const serverdata = JSON.parse(localStorage.getItem(`server:${
			!!this.isTLSenabled ? "wss" : "ws"
		}:${address}:${port}`) ?? "null");
		if (!serverdata) return null;
	}
}

// Authorization form
ServerAuth.authForm = document.createElement("div");
["auth-window"].forEach(c =>
	ServerAuth.authForm.classList.add(c));
ServerAuth.authForm.innerHTML = `
<center><h1>Authorization</h1></center>
<hr/>

<div id="auth-zone">
<center style="" id="register" class="auth-act-item">
	<div class="params-auth">
		<div class="btn-group" role="group" style="width: 90%; margin-bottom: 15px;">
			<button type="button" class="btn btn-light text-dark btn-outline-light">Register</button>
			<button type="button" class="btn btn-dark btn-outline-light" id="menu-log-in">Log-In</button>
		</div>
		
		<!-- Field: username -->
		<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
			<label class="form-label">Username</label>
			<input type="text" class="form-control text-light bg-dark" id="rg.username">
			<div class="form-text text-light">Your username into server.</div>
		</div>
		
		<!-- Field: password -->
		<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
			<label class="form-label">Password</label>
			<input type="password" class="form-control text-light bg-dark" id="rg.password">
			<div class="form-text text-light">Your password into server.</div>
		</div>
		<!-- Not field: retry password -->
		<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
			<label class="form-label">Retry password</label>
			<input type="password" class="form-control text-light bg-dark" id="rg.retry-password">
			<div class="form-text text-light">Retry password for you don't forget password.</div>
		</div>
		
		<!-- Field: server-code -->
		<div class="mb-3" style="width: 90%; margin-bottom: 15px;" id="server-code-form" hidden>
			<label class="form-label">Server password</label>
			<input type="text" class="form-control text-light bg-dark" id="rg.server-code">
			<div class="form-text text-light">Enter the password from server.</div>
		</div>
	</div>
	
	<div class="btn-auth-block">
		<hr><button type="button" class="btn btn-dark btn-outline-light" id="reg-btn">Register</button>
	</div>
</center>

<center style="" id="log-in" class="auth-act-item" hidden>
	<div class="params-auth">
		<div class="btn-group" role="group" style="width: 90%; margin-bottom: 15px;">
			<button type="button" class="btn btn-dark btn-outline-light" id="menu-register">Register</button>
			<button type="button" class="btn btn-light text-dark btn-outline-light">Log-In</button>
		</div>
		
		<!-- Field: username -->
		<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
			<label class="form-label">Username</label>
			<input type="text" class="form-control text-light bg-dark" id="username">
			<div class="form-text text-light">Your username into server.</div>
		</div>
		
		<!-- Field: password -->
		<div class="mb-3" style="width: 90%; margin-bottom: 15px;">
			<label class="form-label">Password</label>
			<input type="password" class="form-control text-light bg-dark" id="password">
			<div class="form-text text-light">Your password into server.</div>
		</div>
	</div>
	
	<div class="btn-auth-block">
		<hr><button type="button" class="btn btn-dark btn-outline-light" id="auth-btn">Log-In</button>
	</div>
</center>
`;

// Main menu form
ServerAuth.mainMenuForm = document.createElement("div");
["mainmenu-window"].forEach(c =>
	ServerAuth.mainMenuForm.classList.add(c));
ServerAuth.mainMenuForm.innerHTML = `
<div id="games-panel" hidden>
	<div id="games-content">
		<center><h2>Games</h2></center><hr/>
	</div>
</div>

<div id="main-panel" hidden>
	<div id="main-content">
		<center><h2>Your Profile</h2></center><hr/>
		<div class="flex-box">
			<div class="characters-menu">
				<center><h4>Characters</h4></center>
				<div id="user-charlist" class="user-character-list btn-group-vertical charlist-item" role="group" aria-label="Characters">
					<!--<button type="button" class="btn btn-dark btn-outline-light">
						<div class="flex-box"><img src="https://fullgream.tech/assets/contacts-image.jpg" class="avatar-on-charlist" /><h5>John Doe</h5></div>
					</button>
					<button type="button" class="btn btn-success btn-outline-light">Add character</button>-->
				</div>
			</div>
			<div class="character-menu">
				<center><h4>Character</h4></center>
				<div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="mainmenu-load"><center>Loading...</center></div>

<div id="mainmenu-error"><center>Throwed error</center></div>
`;