// import "./DarkMode.css"
import { ChangeEventHandler } from "react"

/* NEW (START) */
const setDark = () => {
	localStorage.setItem("theme", "dark")
	document.documentElement.setAttribute("data-theme", "dark")
}

const setLight = () => {
	localStorage.setItem("theme", "light")
	document.documentElement.setAttribute("data-theme", "light")
}

const storedTheme = localStorage.getItem("theme")

const prefersDark =
	window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches

const defaultDark =
	storedTheme === "dark" || (storedTheme === null && prefersDark)

if (defaultDark) {
	setDark()
}

const toggleTheme: ChangeEventHandler<HTMLInputElement> = (e) => {
	if (e.target.checked) {
		setDark()
	} else {
		setLight()
	}
}
/* NEW (END) */

const DarkMode = () => {
	return (
		<div className="toggle-theme-wrapper">
			<span>☀️</span>
			<label className="toggle-theme" htmlFor="checkbox">
				<input
					type="checkbox"
					id="checkbox"
					// NEW
					onChange={toggleTheme}
					defaultChecked={defaultDark}
				/>
				<div className="slider round"></div>
			</label>
			<span>🌒</span>
		</div>
	)
}

export default DarkMode