import React, {ReactNode, useContext, useEffect, useReducer, useState} from 'react';
    import useLoading from "../../../../hooks/useLoading";
    import NotificationsSettingsIcon from "../../../SVG/NotificationsSettingsIcon";
    import PageTitle from "../../../UI/Typography/PageTitle";
    import PageSubtitle from "../../../UI/Typography/PageSubtitle";
    import CustomToggler from "../../../UI/CustomToggler/CustomToggler";
    import PreferencesIcon from "../../../SVG/PreferencesIcon";
    const UIPreferences = () => {
        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
            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)
        };

        useEffect(() => {
            const root = document.documentElement;

            if (isDark) {
                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");
            }
        }, [isDark]);



        return (
            <div id="notifications-settings">

                <div>
                    <div className={'settings-cat-header mb-6'}>
                        <div className={'d-flex gap-3 align-items-center'}>
                            <PreferencesIcon color={'#1a73e8'} width={'26'} height={'26'}/>
                            <PageTitle>Ρυθμίσεις Εμφάνισης</PageTitle>
                        </div>
                        <PageSubtitle>Ενημερώστε τις επιλογές του περιβάλλοντος εργασίας σας</PageSubtitle>
                    </div>


                    <div className='row gy-4 gx-4 align-items-start mb-5'>

                        <div
                            className="toggler-container col-12 col-xl-6">
                            <p className={"toggler-container-title"}>
                                Σκούρο θέμα
                            </p>
                            {/*// @ts-ignore*/}
                            <CustomToggler
                                onChange={(value) => handleThemeToggle(Boolean(value))}
                                checked={isDark}
                            />
                        </div>
                    </div>
                </div>
            </div>
        );

    }

    export default UIPreferences;