<script lang="ts">
	import {
		fetchAllChannels,
		hasLoadedAllChannels,
		recentlyWatchChannel,
		searchModalData
	} from '$lib/constants/stores';
	import { Avatar, modalStore } from '@skeletonlabs/skeleton';
	import { createEventDispatcher } from 'svelte';
	import { flip } from 'svelte/animate';
	import { quintOut } from 'svelte/easing';
	import { crossfade } from 'svelte/transition';

	/**
	 * =================================================================
	 * variables
	 * =================================================================
	 */
	const dispatch = createEventDispatcher();
	const [send, receive] = crossfade({
		fallback(node, params) {
			const style = getComputedStyle(node);
			const transform = style.transform === 'none' ? '' : style.transform;

			return {
				duration: 600,
				easing: quintOut,
				css: (t) => `
					transform: ${transform} scale(${t});
					opacity: ${t}
				`
			};
		}
	});

	let channels: any[] = $recentlyWatchChannel;
	let allChannels: any[] = $fetchAllChannels;
	let searchValue: string = '';
	let flitteredChannels: any = [];

	/**
	 * =================================================================
	 * Function
	 * =================================================================
	 */
	// Load media by title
	const loadMedia = (data: any) => {
		searchModalData.set(data);
		modalStore.close();
	};

	/**
	 * =================================================================
	 * Svlete Reactivity
	 * =================================================================
	 */
	// Search filter
	$: if (searchValue !== '') {
		flitteredChannels = allChannels.filter((channel: { name: string }) =>
			channel.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase())
		);
	}
</script>

<div
	class="card bg-surface-100/60 dark:bg-surface-500/30 backdrop-blur-lg overflow-hidden w-full max-w-[800px] shadow-xl mt-8 mb-auto"
>
	<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-md">
		<div class="input-group-shim"><i class="fa-solid fa-magnifying-glass text-xl ml-4" /></div>
		<input
			class="p-3 focus:outline-none"
			type="search"
			placeholder="Search..."
			disabled={!$hasLoadedAllChannels}
			bind:value={searchValue}
		/>
	</div>
	<div class="h-[500px] overflow-auto hide-scrollbar p-4">
		{#if searchValue !== ''}
			{#if flitteredChannels}
				<nav class="list-nav">
					<ul>
						{#each flitteredChannels as channel, i (i)}
							<li
								class="border-b border-surface-400-500-token"
								in:receive={{ key: i }}
								animate:flip={{ duration: 500 }}
							>
								<a href={'javascript:void(0)'} on:click={() => loadMedia(channel)}>
									<div class="avatar">
										<Avatar src={channel.preview} width="w-10 md:w-12" rounded="rounded-full" />
									</div>
									<span class="flex-auto">{channel.name}</span>
									<span class="font-light"><i class="fa fa-search" /></span>
								</a>
							</li>
						{/each}
					</ul>
				</nav>
			{/if}
		{:else if channels}
			<nav class="list-nav">
				<ul>
					{#each channels as channel}
						<li class="border-b border-surface-400-500-token">
							<a href={'javascript:void(0)'} on:click={() => loadMedia(channel)}>
								<div class="avatar">
									<Avatar src={channel.preview} width="w-10 md:w-12" rounded="rounded-full" />
								</div>
								<span class="flex-auto">{channel.name}</span>
								<span class="font-light"><i class="fa fa-history" /></span>
							</a>
						</li>
					{/each}
				</ul>
			</nav>
		{/if}
	</div>
</div>
