<script>
	import Header from '../Header.svelte';
	import { handleLogin } from '$lib/login';
	import { onMount } from 'svelte';
	import { fly, blur } from 'svelte/transition';
	import { cubicOut, backInOut  } from 'svelte/easing';

	let username = ''
	let password = ''
	let enterError = ''
	let passwordError = ""
	

	async function listener(event){

		if(enterError.length !== 0){
			enterError = ""
		}
	}

	async function login() {
		switch (true) {
			case username.length === 0 && password.length !== 0:
				document.getElementById('username').placeholder = 'ничего не забыл?';
				document.getElementById('password').placeholder = '';
				break;

			case username.length !== 0 && password.length === 0:
				document.getElementById('username').placeholder = '';
				document.getElementById('password').placeholder = 'ничего не забыл?';
				break;

			case username.length === 0 && password.length === 0:
				document.getElementById('password').placeholder = 'ничего не забыл?';
				document.getElementById('username').placeholder = 'ничего не забыл?';
				break;

			default:
				document.getElementById('password').placeholder = '';
				document.getElementById('username').placeholder = '';
				enterError = await handleLogin(username, password);
				break;
		}
	}

	let hi = ' ';
	let greeting = ' ';

	let greetings = [
		'Рад видеть тебя снова',
		'Как прошел день?',
		'Как настроение?',
		'Come in'
	];
	greeting = greetings[Math.floor(Math.random() * greetings.length)];

	let His = ['Привет!', 'Дарова!', 'Хай!', 'Приветствую!'];
	hi = His[Math.floor(Math.random() * (His.length - 0))];

	let loadingPage = false;
	onMount(() => {
		loadingPage = !loadingPage;
	});

	
</script>

{#if loadingPage == true}
	<body>
		<div class="loginField">
			<div class="loginMainDiv">
				<div class="loginDiv" transition:blur={{ duration: 800 }}>
					<div class="noiseGif">
						<div class="marginDiv">

							<div class="greetingsDiv">
								<h1 id="hi" transition:blur={{
									y: -30, duration: 1900, easing: cubicOut }}>{hi}</h1>
								<h2 id="greetings" transition:blur={{
									 y: -30, duration: 2000, easing: cubicOut }}>
									{greeting}</h2>
							</div>

							<div class="bigGroup">
								<div class="group">
									<h3>никнейм или почта</h3>
									<input placeholder=" " type="text" id="username" on:input={listener} bind:value={username} 
										   on:keydown={(event) => event.key == 'Enter' && login()}	/>
								</div>

								<div class="group">
									<h3>пароль</h3>
									<input placeholder=" " type="password" id="password" on:input={listener} bind:value={password} 
										   on:keydown={(event) => event.key == 'Enter' && login()}/>
								</div>
							</div>

							<div class="enterDiv">
								<button class="enterButt" on:click={login}>Войти</button>
								{#if enterError !== ''}
									<h3 class="enterError"
									transition:fly={{ y: 200, duration: 300, backInOut }}>{enterError}</h3>
								{/if}
							</div>
							
						</div>
					</div>
				</div>
				<div class="regDiv" transition:blur={{ delay:300, duration: 800 }}>
					<div class="noiseGif">
						<div class="regregDiv">
							<h2 class="reg1">Нет аккаунта? Лох!</h2>
							<button class="reg2" on:click={() => (location.assign('/register'))}
								>Перестать был лохом</button>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="previewField">
			<div class="previewCenter">
				<h2 transition:fly={{ y: -1920, delay: 400, duration: 1200 }}>BP Chat</h2>
				<div class="imgOnRightDiv">
					<img class="imgOnRight" src="image/BPytka.png" alt="птичка" transition:fly={{ y: -1920, delay: 300, duration: 1200 }}>
					<img class="imgOnRightLight" src="image/BPytka.png" alt="птичка" transition:blur={{ delay: 900, duration: 1200 }}>
				</div>
			</div>
		</div>
	</body>
{/if}

<style lang="scss">

	.imgOnRightDiv{
		width: 100%;
		height: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		//background-color: red;
	}

	.previewCenter{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;	
	}

	.imgOnRight,
	.imgOnRightLight{
		width: 25%;
	}

	.imgOnRight{
		width: 25%;
		position: absolute;
		z-index: 5;
	}

	.imgOnRightLight{
		position: absolute;
		filter: blur(15px);

		z-index: 4;
	}

	.greetingsDiv{
		height: 30%;
		display: flex;
		flex-direction: column;
		gap: 35px;
		justify-content: center;
	}

	.enterDiv{
		display: flex;
		flex-direction: column;
		height: 20%;
	}
	.enterButt{
		height: 60%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.enterError{
		margin-bottom: 1%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.reg1,
	.reg2{
		height: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	input::placeholder {
		color: var(--disable);
		transition: opacity 1s ease;
		opacity: 1;
	}

	#greetings,
	#hi {
		transition: opacity 1s ease;
	}

	.group > * {
		margin-top: 1%;
		margin-bottom: 1%;
	}

	.group {
		display: flex;
		flex-direction: column;
		
	}
	.bigGroup{
		height: 40%;
	}

	.regregDiv {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.loginMainDiv {
		width: 60%;
		height: 90%;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.regDiv {
		width: 100%;
		height: 32%;
	}
	.loginDiv {
		width: 100%;
		height: 66%;
	}

	.loginDiv,
	.regDiv {
		border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;
		border-radius: 15px;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	.previewField {
		height: 100%;
		width: 50%;
	}

	.loginField {
		height: 100%;
		width: 50%;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.enterError {
		color: var(--disable);
		font-weight: 700;
	}

	.marginDiv {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 90%;
		height: 100%;
		padding-left: 5%;
		padding-right: 5%;
		
	}

	input {
		border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;
		border-radius: 10px;
		width: 100%;
		height: 2em;
		font-size: 24px;
		font-weight: 600;
		box-shadow:
			4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
			-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
		outline: none;
	}

	input:focus {
		transition: 0.5s ease-in;
		box-shadow: 0 0 transparent;
	}
	input:not(:focus) {
		transition: 0.5s ease-in-out;
		box-shadow:
			4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
			-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
	}

	button {
		text-shadow: 0 0 20px white;
		font-size: 36px;
		background: transparent;
		border: 0;
		height: 10%;
		margin-bottom: 1%;
	}

	button {
		cursor: pointer;
	}

	h1,
	h2,
	h3,
	input,
	button {
		color: var(--fontColor);
	}

	h1 {
		display: flex;
		justify-content: center;
		align-items: center;
		text-shadow: 0 0 20px white;
		font-size: 5vh;
	}

	h2 {
		width: 100%;
		display: flex;
		justify-content: center;
		text-shadow: 0 0 20px white;
		font-weight: 500;
		font-size: 3.5vh;
	}
	h3 {
		font-weight: 100;
		font-size: 3vh;
	}

	body {
		overflow: hidden;
		display: flex;
		flex-direction: row;
	}

</style>
