import React, {useState, useEffect} from "react";
import Toggle from "react-toggle";
import "react-toggle/style.css";
import "./theme-toggler.scss";


const ThemeToggler = () => {
    const root = document.documentElement;
    const getInitialTheme = () => {

        //initialise mode form user preference or broswer mode if not chosen
        const user = localStorage.getItem('prefers-color-scheme') ?? null
        const browser = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

        const mode = user ?? browser
        if (mode === 'dark') {
            root.setAttribute("data-theme", "dark");
        } else {
            root.removeAttribute("data-theme"); // or set it to a default value, if needed
            // root.style.setProperty("--main-color", "#040059");
        }

        return (mode === 'dark')



    };

    const [isDark, setIsDark] = useState<boolean>(getInitialTheme);

    const handleThemeToggle = (checked: boolean) => {

        localStorage.setItem('prefers-color-scheme', checked ? 'dark' : 'light');
        setIsDark(checked); // When checked is true, switch to dark mode (inverted theme)
        if (checked) {
            root.setAttribute("data-theme", "dark");
        } else {
            root.removeAttribute("data-theme"); // or set it to a default value, if needed
            // root.style.setProperty("--main-color", "#040059");
        }
    };

    useEffect(() => {



    }, [isDark]);

    return (
        <Toggle
            checked={isDark}
            onChange={({target}) => handleThemeToggle(target.checked)}
            icons={{checked: "🌙", unchecked: "🔆"}}
            aria-label="Dark mode toggle"
        />
    );
};

export default ThemeToggler;