import {createBrowserRouter, RouterProvider} from "react-router-dom"
import Station from "./Station"
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@mui/material"
import React, {useMemo} from "react"
import {frFR, LocalizationProvider} from "@mui/x-date-pickers"
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"
import 'dayjs/locale/fr'
import './App.css'

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <div>Hello World!</div>
    },
    {
      path: "/station/:stopId",
      element: <Station />
    }
  ])

  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  const theme = useMemo(
      () =>
        createTheme({
          palette: {
            mode: prefersDarkMode ? 'dark' : 'light',
            sncf: {
              departures: {
                dark: "#003A79",
                light: "#0064AB",
              },
              arrivals: {
                dark: "#1F5628",
                light: "#187936",
              },
            }
          },
        }),
      [prefersDarkMode],
    );

  return <>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <LocalizationProvider dateAdapter={AdapterDayjs} localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText} adapterLocale="fr">
        <RouterProvider router={router} />
      </LocalizationProvider>
    </ThemeProvider>
  </>
}

export default App;