<script lang="ts">
	import { TmdbApi } from '$lib/tmdb-api';
	import { onMount } from 'svelte';
	import { ChevronDown } from 'radix-icons-svelte';

	export let tmdbId;

	export let type: 'movie' | 'tv' = 'movie';

	let bg = '';
	let title = 'Loading...';

	const progress = Math.random() > 0.5 ? Math.round(Math.random() * 100) : 100;

	onMount(() => {
		TmdbApi.get('/' + type + '/' + tmdbId)
			.then((res) => res.data)
			.then((data: any) => {
				console.log('data', data);
				bg = 'https://www.themoviedb.org/t/p/original/' + data.poster_path;
				title = data.title;
			});
	});
</script>

<div class="group grid grid-cols-[3px_1fr_3px] grid-rows-[3px_1fr_3px]">
	<div
		style={'width: ' + progress + '%'}
		class="h-full bg-white opacity-90 group-hover:opacity-100 transition-opacity col-span-3"
	/>
	<div
		transition-opacity
		style={'height: ' + progress + '%'}
		class="w-full bg-white opacity-90 group-hover:opacity-100"
	/>
	<div
		class="bg-center bg-cover aspect-[2/3] h-72 shadow-2xl m-1.5"
		style={"background-image: url('" + bg + "')"}
	>
		<div
			class="w-full h-full bg-gradient-to-b from-[#00000099] via-20% via-transparent hover:bg-[#00000099] transition-all flex"
		>
			<div
				class="opacity-0 group-hover:opacity-100 transition-opacity p-2 flex flex-col justify-between flex-1 cursor-pointer"
			>
				<div>
					<h1 class="font-bold text-lg tracking-wide">
						{title}
					</h1>
					{#if type === 'movie'}
						<h2 class="text-xs uppercase text-zinc-300"><b>December</b> 2022</h2>
					{:else}
						<h2 class="text-xs uppercase text-zinc-300">S1 <b>E2</b></h2>
					{/if}
					{#if progress}
						<h2>30min left</h2>
					{/if}
				</div>
				<div class="flex flex-col gap-2">
					<button
						class="bg-white border-2 border-white hover:bg-amber-400 hover:border-amber-400 transition-colors text-zinc-900 px-8 py-2.5 uppercase tracking-widest font-extrabold cursor-pointer text-xs"
						>Stream</button
					>
					<button
						class="border-2 border-white cursor-pointer transition-colors px-8 py-2.5 uppercase tracking-widest font-semibold text-xs hover:bg-amber-400 hover:text-black"
						>Details</button
					>
				</div>
			</div>
		</div>
	</div>
	<div
		style={'height: ' + progress + '%'}
		class="w-full bg-white opacity-90 group-hover:opacity-100 transition-opacity self-end"
	/>
	<div
		style={'width: ' + progress + '%'}
		class="h-full bg-white opacity-90 group-hover:opacity-100 transition-opacity col-span-3 justify-self-end"
	/>
</div>
