import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
import { Session } from '../services';

// TODO dynamic theming
import 'primereact/resources/themes/bootstrap4-dark-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import "primeicons/primeicons.css";
import "primeflex/primeflex.css" 

const ThemeContext = React.createContext<{
  darkMode: boolean;
  setDarkMode: Dispatch<SetStateAction<boolean>>;
}>({ darkMode: false, setDarkMode: () => false });

export const ThemeProvider = ({ children }: { children: any }) => {
  const [darkMode, setDarkMode] = useState<boolean>(Session.theme() === 'dark');
  const refDarkMode = useRef<boolean>();
  refDarkMode.current = darkMode;

  useEffect(() => {
    Session.setTheme(refDarkMode.current ? 'dark' : 'light');
  //  window.location.reload();
  }, [darkMode]);

  //if (darkMode) {
  //  import('primereact/resources/themes/bootstrap4-dark-blue/theme.css');
  //} else {
  //  import('primereact/resources/themes/bootstrap4-light-blue/theme.css');
  //}

  return (
    <>
      <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
        {children}
      </ThemeContext.Provider>
    </>
  );
};

export default ThemeContext;