<script>
	import Icon from '@iconify/svelte';
	import { locale } from '$lib/translations.js';

	import { Splide, SplideSlide } from '@splidejs/svelte-splide';
	import { browser } from '$app/environment';
	// Add these CSS imports
	import '@splidejs/splide/css'; // core styles
	import '@splidejs/splide/css/default'; // default theme

	import { fade, fly } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	import { onMount } from 'svelte';

	let slides = [
		{ id: 1, title: 'Hello' },
		{ id: 2, title: 'World' },
		{ id: 3, title: 'Rashid Khan' },
		{ id: 4, title: 'Rashid Khan' }
	];

	let splide;
	let currentPageIndex = 0;
	let isFirstLoad = true;
	let mounted = false;

	// Reset isFirstLoad when the component is mounted
	onMount(() => {
		// Small delay to ensure DOM is ready
		setTimeout(() => {
			mounted = true;
		}, 0);
	});

	function handleSlideClick(index) {
		if (splide?.splide) {
			splide.splide.go(index);
		}
	}

	$: if (splide?.splide) {
		splide.splide.on('moved', function (newIndex) {
			currentPageIndex = newIndex;
		});

		splide.splide.on('autoplay:playing', function () {
			currentPageIndex = splide.splide.index;
		});
	}

	function typewriter(node, { speed = 50, delay = 0 }) {
		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;

		if (!valid) {
			throw new Error(`This transition only works on elements with a single text node child`);
		}

		const text = node.textContent;
		const duration = text.length * speed;

		return {
			delay,
			duration,
			tick: (t) => {
				const i = ~~(text.length * t);
				node.textContent = text.slice(0, i);
			}
		};
	}
</script>

{#if browser}
	<div class="fade-in contents {mounted ? 'visible' : ''}">
		<section class="relative flex flex-col items-center" style="direction: ltr;">
			<Splide
				bind:this={splide}
				options={{
					type: 'loop',
					autoplay: true,
					interval: 10000,
					arrows: false,
					pagination: false,
					rewind: true,
					speed: 1000
				}}
			>
				{#each slides as _, index}
					<SplideSlide>
						<div
							class="hero relative z-10 h-72 w-full shrink-0 snap-center bg-[url('/img/mobile/hero-img.jpg')] bg-cover lg:h-128 lg:bg-[url('/img/hero-bg-2.jpg')]"
						>
							<div id="hero-bg" class="relative h-full w-full">
								<div
									class="absolute inset-0 bg-gradient-to-r from-blue-900/90 via-blue-800/60 to-transparent"
								></div>
								<div class="relative z-10">
									<div class="m-auto flex max-w-6xl flex-row px-4 lg:px-0">
										<div
											class="mt-28 flex w-full flex-col justify-end space-y-3 text-white lg:mt-20 lg:w-1/2 {$locale !==
											'en-US'
												? 'direction-rtl'
												: ''}"
										>
											{#key currentPageIndex}
												<h2
													in:typewriter={{ speed: 30, delay: 200 }}
													class=" text-lg font-bold lg:text-3xl"
												>
													Afghanistan Cricket Team will face Pakistan in Debut Match Naveen Delivers
												</h2>

												<h3
													in:fly={{ y: 30, duration: 800, delay: 2000 }}
													class="text-md line-clamp-1 uppercase lg:text-lg"
												>
													on Friday in an ODI match ahead of the 2019 World Cup.
												</h3>

												<h4
													in:fly={{ y: 30, duration: 800, delay: 2200 }}
													class="lg:text-md line-clamp-2 text-sm lg:ml-4"
												>
													Rashid Khan Takes 5 Wickets Rahmanullah Gurbaz Make his first 100 in Debut
													Match Naveen Delivers 10 overs with Excellent Economy afd
												</h4>

												<a
													in:fly={{ y: 30, duration: 800, delay: 2400 }}
													href="/"
													class="w-14 bg-sky-400 px-2 text-sm text-white uppercase"
												>
													More
												</a>

												<div
													in:fade={{ duration: 1000, delay: 2600 }}
													class="hidden h-64 w-4/5 bg-[url('/img/hero-bg-2.jpg')] bg-cover bg-center lg:flex"
												>
													<div class="bg-sky-gradiant relative h-full w-full bg-cover bg-center">
														<div class="absolute right-3 bottom-3 flex flex-row items-center">
															<Icon icon="mdi:play" />
															VIDEO
														</div>
													</div>
												</div>
											{/key}
										</div>
										<div></div>
									</div>
								</div>
							</div>
						</div>
					</SplideSlide>
				{/each}
			</Splide>

			<div
				class="absolute right-0 bottom-0 left-0 z-20 flex flex-row items-center justify-center space-x-2 bg-gradient-to-t from-black/50 to-transparent py-4"
			>
				{#each slides as slide, index}
					<button
						on:click={() => handleSlideClick(index)}
						aria-label={`Go to slide ${index + 1}`}
						class="rounded-full transition-all duration-300 {index === currentPageIndex
							? 'h-1.5 w-10 bg-sky-500'
							: 'h-1.5 w-6 bg-white/50 hover:bg-white/70'}"
					></button>
				{/each}
			</div>
		</section>
	</div>
{/if}

<style>
	.fade-in {
		opacity: 0;
		transition: opacity 1s ease-in-out;
	}

	.fade-in.visible {
		opacity: 1;
	}
</style>
