<script>
	import { onMount } from "svelte";
	let is_resize = false;
	let is_transparent = false;
	let is_dark = true;

	function handleSwitchDarkMode() {
		setTimeout(() => {
			is_transparent = true;
			is_dark = !is_dark;
			setTimeout(() => {
				is_resize = false;
				is_transparent = false;
			}, 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>

<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 h-[50px] 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>
