import "@fontsource/inter";
import React, { useEffect } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { ThemeProvider } from '@emotion/react'
import { createTheme } from '@mui/material'
import { ruRU } from '@mui/material/locale'
import { getDarkMode, usePrefStore } from "./store/preferences.ts";

const mainTheme = createTheme(
  {
    typography: {
      fontFamily: [
        'Inter'
      ].join(',')
    },
    components: {
      MuiButtonBase: {
        defaultProps: {
          //disableRipple: true,
        }
      },
      MuiButtonGroup: {
        defaultProps: {
          //disableRipple: true,
        }
      }
    },
  }
)

const darkTheme = createTheme(
  {
    palette: {
      mode: "dark",
      primary: { main: '#1976d2' },
    },
  },
  ruRU,
);

const lightTheme = createTheme(
  {
    palette: {
      mode: "light",
      primary: { main: '#1976d2' },
    },
  },
  ruRU,
);

function ThemedApp() {
  const prefStore = usePrefStore()

  useEffect(() => {
    getDarkMode()
  }, [])

  return (
    <ThemeProvider theme={prefStore.darkMode ? { ...mainTheme, ...darkTheme } : { ...mainTheme, ...lightTheme }}>
      <App />
    </ThemeProvider>
  )
}

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemedApp />
  </React.StrictMode>,
)