<script>
	// @ts-nocheck
	import { Label } from '$lib/components/ui/label';
	import { Button } from '$lib/components/ui/button';
	import Player from '$lib/components/organisms/player.svelte';
	import { onMount } from 'svelte';
	import { PlayIcon, Loader, Plus, MailIcon, PlusIcon } from 'lucide-svelte';
	import CreateGroup from '$lib/components/organisms/create-group.svelte';

	let script = "";

	let opened = false;
	let groups = [];
	let pods = []
	onMount(async () => {
		let res = await (await fetch("/")).json();
		console.log(res);
		script = res.script;

		res = await (await fetch("/api/groups")).json();
		groups = res.groups;

	});
</script>

{#if opened}
	<Player script={script} on:close={() => opened=false} />
{/if}

<div class="flex gap-4 flex-col">
	<Label>Your Latest Podcasts</Label>
	{#each pods as pod}	
		<Button class="flex w-full flex-row justify-start rounded text-left" variant="secondary" on:click={() => opened = true}>
			<div class="items-center justify-center rounded-lg p-2 pl-0">
				<PlayIcon class="h-4 w-4" />
			</div>
			<div>
				<h3 class="text-md">Your Daily Pod</h3>
				<p class="text-sm text-muted-foreground">{new Date(pod.date_created).toLocaleDateString('de')}</p>
			</div>
		</Button>
	{/each}

	<Label>Your Groups</Label>
	<div class="overflow-x-scroll scrollbars-hidden">
		<CreateGroup />
		{#each groups as group}
			<Button class="mt-4 flex w-full flex-row justify-start rounded text-left" variant="secondary">
				<div class="items-center justify-center rounded-lg p-2 pl-0">
					<MailIcon class="h-4 w-4" />
				</div>
				<div>
					<h3 class="text-md">{group.name}</h3>
				</div>
			</Button>
		{/each}
	</div>
</div>