import { useTheme } from "../../styles/StyleFactory";
import Home from "./Home";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import {
  impaktappsJsonformsPropsType,
  serviceHolderType,
} from "../../renderers/interface/inputfieldProps";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const App = ({
  serviceHolder,
  permissions,
  styleTheme,
  validationMode,
  serverDateTimeFormat = "YYYY-MM-DDTHH:mm:ss.SSSZ",
  locale,
  timeZone = "Asia/Kolkata",
  dateFormat =  "YYYY-MM-DD",
  dateTimeFormat = "YYYY-MM-DD HH:mm:ss",
  additionalIcons = {},
   notificationAutoHideDuration=700,
}: impaktappsJsonformsPropsType) => {
  const theme = useTheme(styleTheme);
  return (
    <ThemeProvider theme={theme.myTheme}>
      <CssBaseline />
      <DndProvider backend={HTML5Backend}>
        <Router>
          <Routes>
            <Route
              path="/:id/*"
              element={
                <Home
                  serviceHolder={serviceHolder}
                  theme={theme}
                  permissions={permissions}
                  serverDateTimeFormat={serverDateTimeFormat}
                  locale={locale}
                  timeZone={timeZone}
                  validationMode={validationMode}
                  pageName="id"
                  additionalIcons={additionalIcons}
                  dateFormat={dateFormat}
                  dateTimeFormat={dateTimeFormat}
                  notificationAutoHideDuration={notificationAutoHideDuration}
                />
              }
            />
          </Routes>
        </Router>
      </DndProvider>
    </ThemeProvider>
  );
};
export default App;