<script>
	import '../app.css';
	import Header from '../components/misc/header.svelte';
	import AlertHeader from '../components/misc/alert-header.svelte';
	import Musicplayer from '../components/misc/musicplayer.svelte';
	import CurrentMusicStore from '../stores/currentMusic';
	import Musicselectionmodal from '../components/misc/musicselectionmodal.svelte';
	import musicStore from '../stores/musicStore';

	$: musicPaused = $CurrentMusicStore.paused;
	$: musicTitle = $CurrentMusicStore.musicTitle;
	$: musicArtist = $CurrentMusicStore.musicArtist;
	$: musicUrl = $CurrentMusicStore.musicUrl;

	function onMusicToggle() {
		if (musicUrl == '') {
			$CurrentMusicStore.musicTitle = $musicStore[0].musicTitle;
			$CurrentMusicStore.musicArtist = $musicStore[0].musicArtist;
			$CurrentMusicStore.musicUrl = $musicStore[0].musicUrl;
		}

		$CurrentMusicStore.paused = !$CurrentMusicStore.paused;
		return;
	}

	// Modal stuff
	let modalShow = false;

	// Footer stuff
	/**
* @type {number}
*/
	let footerHeight;

</script>

<div class="-z-20 absolute">
	<Musicplayer />
</div>
<div
	class="flex flex-col bg-gradient-to-tr from-[#A2D2FF] to-[#FFAFCC] w-screen text-murasaki overflow-auto min-h-screen relative "
>
	<!-- Page content -->
	<div class="" style="padding-bottom: {footerHeight + 10}px;">
		<!-- modal -->
		<Musicselectionmodal bind:show={modalShow} />
		<!-- Possible alert header -->
		<!--<AlertHeader text='ALERT'/>-->
		<!-- Header -->
		<Header />
		<!-- Main content -->
		<slot />
	</div>
	<!-- Footer -->
	<div bind:clientHeight={footerHeight} class="bg-slate-100 w-full h-min md:h-10 lg:pl-20 absolute bottom-0">
		<div class="h-full">
			<button on:click={onMusicToggle} class="bg-white border-black border rounded h-min w-20 mt-1">
				{#if musicPaused}
					<span class="font-mono">▶</span>
					Play
				{:else}
					<span class="font-mono ">⏸&#xFE0E;</span>
					Pause
				{/if}
			</button>
			<button
				class="bg-white border-black border rounded h-min"
				on:click={() => {
					modalShow = !modalShow;
				}}>Show music selection</button
			>
			<br class="block md:hidden" />
			<span>Current song: {musicArtist} - {musicTitle}</span>
		</div>
	</div>
</div>

<!-- background-image: linear-gradient(to right top, #051937, #1a325b, #304d82, #466aab, #5d88d6); 
https://mycolor.space/gradient?ori=to+right+top&hex=%23051937&hex2=%235D88D6&sub=1
-->
<style>
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500&family=Roboto+Slab&display=swap');
</style>
