import {
  AppProps,
  ErrorBoundary,
  ErrorComponent,
  ErrorFallbackProps,
  useQueryErrorResetBoundary,
} from "blitz"

import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import React, { useEffect } from "react";
import { useMediaQuery } from "@mui/material";
import { useGlobalState } from "app/core/state/GlobalState";
import { LocalStorageKeys } from "app/core/dto/SaveKeys";
import { ThemeMode } from "app/core/state/ThemeMode";
import { darkPalette } from "app/core/theme/darkTheme";
import { lightPalette } from "app/core/theme/lightTheme";
import { getTheme } from "app/core/theme/Theme";

export default function App({ Component, pageProps }: AppProps) {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const [preferedColorScheme ,setPreferedColorScheme] = useGlobalState(state => [state.preferedColorScheme, state.setPreferedColorScheme])

    useEffect(() => {
        const localPreferedTheme = localStorage.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME);
        if (localPreferedTheme) {
            setPreferedColorScheme(localPreferedTheme as ThemeMode)
            return
        }

        const preferedTheme = prefersDarkMode ? ThemeMode.DARK_MODE : ThemeMode.LIGHT_MODE;
        setPreferedColorScheme(preferedTheme)
        // eslint-disable-next-line
    }, [prefersDarkMode]) // Need to be only used on prefersDarkMode change
  const getLayout = Component.getLayout || ((page) => page)

  return (
    <ThemeProvider theme={getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette : lightPalette)}>
      <CssBaseline />
      <ErrorBoundary
        FallbackComponent={RootErrorFallback}
        onReset={useQueryErrorResetBoundary().reset}
      >
        {getLayout(<Component {...pageProps} />)}
      </ErrorBoundary>
    </ThemeProvider>
  );
}

/*
    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
    const [preferedColorScheme ,setPreferedColorScheme] = useGlobalState(state => [state.preferedColorScheme, state.setPreferedColorScheme])

    useEffect(() => {
        const localPreferedTheme = localStorage.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME);
        if (localPreferedTheme) {
            setPreferedColorScheme(localPreferedTheme as ThemeMode)
            return
        }

        const preferedTheme = prefersDarkMode ? ThemeMode.DARK_MODE : ThemeMode.LIGHT_MODE;
        setPreferedColorScheme(preferedTheme)
        // eslint-disable-next-line
    }, [prefersDarkMode]) // Need to be only used on prefersDarkMode change

    return (
        <>
            <ThemeProvider theme={getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette : lightPalette)}>
                <CssBaseline/>
                <MainPage/>
            </ThemeProvider>
        </>
    )
*/

function RootErrorFallback({ error }: ErrorFallbackProps) {
  return <ErrorComponent statusCode={error.statusCode || 400} title={error.message || error.name} />
}