"use client";
import * as React from "react";
import { PaletteMode, ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import AppAppBar from "@/components/modules/AppAppBar";
import getMPTheme from "../../theme/getMPTheme";

interface ThemeProviderProps {
    children: React.ReactNode;
}

export default function ThemeProviderClient({children}: Readonly<ThemeProviderProps>){
  const [mode, setMode] = React.useState<PaletteMode>("light");

  const MPTheme = createTheme(getMPTheme(mode));

  React.useEffect(() => {
    const savedMode = localStorage.getItem("themeMode") as PaletteMode | null;
    if (savedMode) {
      setMode(savedMode);
    } else {
      const systemPrefersDark = window.matchMedia(
        "(prefers-color-scheme: dark)"
      ).matches;
      setMode(systemPrefersDark ? "dark" : "light");
    }
  }, []);

  const toggleColorMode = () => {
    const newMode = mode === "dark" ? "light" : "dark";
    setMode(newMode);
    localStorage.setItem("themeMode", newMode);
  };

  return (
    <ThemeProvider theme={MPTheme}>
      <CssBaseline enableColorScheme />
      <AppAppBar mode={mode} toggleColorMode={toggleColorMode} />
      {children}
    </ThemeProvider>
  );
};