<script>
	import { onMount } from "svelte";

	let is_resize = false;
	let is_transparent = false;
	let is_dark = true;
	let is_update = false;

	function handleSwitchDarkMode() {
		setTimeout(() => {
			is_transparent = true;
			is_dark = !is_dark;
			setTimeout(() => {
				is_resize = false;
				is_transparent = false;
				setTimeout(() => {
					is_update = true;
					setTimeout(() => {
						is_update = false;
					}, 0);
				}, 0);
			}, 250);
		}, 500);
		is_resize = true;

		const isDark = window.document.documentElement.classList.toggle("dark");
		if (isDark) {
			localStorage.setItem("color-theme", "dark");
		} else {
			localStorage.setItem("color-theme", "light");
		}
	}

	onMount(() => {
		if (localStorage.getItem("color-theme") === "light") {
			is_dark = false;
		}
	});
</script>

{#if !is_update}
	<div class="min-w-[40px] min-h-[40px] flex justify-center items-center">
		<!-- svelte-ignore a11y-click-events-have-key-events -->
		<!-- svelte-ignore a11y-no-static-element-interactions -->
		<div
			class="group min-h-[50px] min-w-[50px] rounded-full flex justify-center items-center
				{is_dark ? 'bg-[var(--w-bg)]' : 'bg-[var(--b-bg)]'}  
				"
			on:click={handleSwitchDarkMode}
		>
			<div
				class=" rounded-full
				{!is_transparent
					? is_dark
						? 'group-hover:bg-[var(--b-bg)] dark:group-hover:bg-[var(--b-bg)]'
						: 'group-hover:bg-[var(--w-bg)] dark:group-hover:bg-[var(--w-bg)]'
					: ''}
				 
				{!is_transparent
					? is_resize
						? 'h-[50px] w-[50px]'
						: 'h-[25px] w-[25px]'
					: 'h-[25px] w-[25px]'} 
				transition-all duration-500 ease-in-out"
			></div>
		</div>
	</div>
{/if}
