<script>
	
	import { fade, slide, fly, scale } from 'svelte/transition';
	import { onMount } from 'svelte';
	import Select from 'svelte-select';

	import { UserCheck, handleLogout } from '$lib/userFunction';

	let Nickname;
	let userImage;

	onMount(async () => {
		const UserData = await UserCheck();
		Nickname = UserData.username;
		userImage = UserData.avatar_image;
	});

	let isOpen = false;

	function dropDown() {
		isOpen = !isOpen;
	}
</script>
	
<header>
	<a href="/c" class="avatarDiv">
		<img class="siteAvatar" src="./image/BP-NEON.png" alt="лого"/>
		<h2>BP Chat</h2>
	</a>

	<div class="userUser">
		<button
			class="buttonUser" class:buttonUser2={isOpen}
			on:click={dropDown}
		>
			<h3>{Nickname}</h3>
			<div><img class="userAvatar" src={userImage} alt="аватарка"/></div>
		</button>

		{#if isOpen }
			<!-- svelte-ignore a11y-missing-attribute -->
			<div class="dropdown" in:slide={{ duration: 300, delay: 150 }} out:slide={{ duration:300 }}>
				<a href="/settings" class="listItem">Настройки</a>
				<!-- svelte-ignore a11y-click-events-have-key-events -->
				<!-- svelte-ignore a11y-no-static-element-interactions -->
				<button on:click={handleLogout} class="listItem">Выйти</button>
			</div>
		{/if}
	</div>
</header>

<style lang="scss">
	.buttonUser,
	.dropdown {
		border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;

		border-top-right-radius: 0;
		border-top-left-radius: 0;
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		border-bottom: 0;
		
		
	}

	header {
		position: relative;
		display: flex;
		justify-content: space-between;
		height: 100%;
		width: 100%;
		margin-left: 9%;
		margin-right: 9%;
	}

	.avatarDiv {
		border: 1px solid transparent;
		background:
			linear-gradient(#101010, #101010) padding-box,
			var(--gradient) border-box;
		border-radius: 15px;
		border-bottom: 0;
		border-top-right-radius: 0;
		border-top-left-radius: 0;
		margin-top: -1px;
		text-decoration: none;
	}

	.buttonUser,
	.buttonUser2 {
		width: 230px;
		height: 100%;

		display: flex;
		justify-content: space-around;
		align-items: center;
		
		margin-top: -1px;

		transition: all 300ms ease-in !important;
	}
	.buttonUser2{
		border-bottom-right-radius: 0;
		border-bottom-left-radius:  0;
	}

	.dropdown {
		width: 228px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-top: 0;
	}
	.userAvatar {
		display: flex;
		align-items: center;

		width: 75px;
		height: 75px;
		border-radius: 15px;
	}

	.dropdown > * {
		cursor: pointer;
	}

	.listItem {
		font-size: 16px;
		text-decoration: none;
		text-shadow: 0 0 20px white;
		
		border: 0;
		padding-left: 5px;
		padding-bottom: 3px;
		background: transparent;
		
		color: white;
	}

	.avatarDiv {
		width: 230px;
		height: 100%;

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

	.siteAvatar {
		height: 90%;
	}
</style>
