<script lang="ts">
    import {inertia, page, router} from '@inertiajs/svelte';
    import { globalState } from "@/Library/PassState.svelte";
    import type {Snippet} from "svelte";

    //eslint-disable-next-line
	let { children }: { children: Snippet } = $props();

    const searchChanged = () => {
        if ($page.url !== '/search') {
            router.visit('/search', {
                preserveState: true,
            })
        }
        if ($page.url === '/search' && globalState.searchQuery === '') {
            router.visit('/', {
                preserveState: true,
            })
        }
    }
</script>

<div class="flex flex-col h-screen">
	<div class="flex flex-grow overflow-hidden">
		<nav class="flex flex-col w-2/12 items-center space-y-6 bg-zinc-800 px-10 py-6 text-white text-2xl">
			<div class="rounded-lg bg-slate-700 px-4 py-1">{$page.props.appName}</div>
            <a href="/" use:inertia class="hover:underline">Home</a>
		</nav>

        <main class="w-10/12 px-10 py-8 overflow-y-auto main-content">
            <div class="flex items-center justify-between mb-4">
                <div class="mr-4">
                    {@render globalState.title?.()}
                </div>
                <div class="relative flex-grow">
                    <span class="material-icons text-gray-900 absolute left-3 top-1/2 transform -translate-y-1/2">search</span>
                    <input type="text" placeholder="Search..." bind:value={globalState.searchQuery} oninput={searchChanged} class="w-full p-2 pl-10 rounded-full bg-gray-200 text-black" />
                </div>
            </div>
            {@render children()}
        </main>
	</div>

	<div class="relative w-full bg-zinc-800 text-white p-8 flex flex-col items-center">
		<input
			type="range"
			class="absolute w-full h-4 bg-gray-700 appearance-none slider"
			style="top: 0px;"
            value="0"
		/>
		<div class="w-full flex items-center justify-between mt-2">
			<div>Track Info</div>
			<div>Player Controls</div>
			<div>Volume Controls</div>
		</div>
	</div>
</div>

<style lang="scss">
	.slider {
		height: 4px;
		transition: height 0.3s ease;
		padding: 0;
	}

	.slider:hover {
		height: 4px;
	}

	.slider::-webkit-slider-thumb {
		width: 16px;
		height: 16px;
		background: #fff;
		border-radius: 50%;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.slider::-moz-range-thumb {
		width: 16px;
		height: 16px;
		background: #fff;
		border-radius: 50%;
		cursor: pointer;
	}
</style>
