// import { MutableRefObject, useRef } from "react";
import { DndProvider } from "react-dnd";
import Editor from "./page/app";
import { TouchBackend } from "react-dnd-touch-backend";
import { ConfigProvider, enUS } from "./utils/configProvider";
import { useTranslation } from "react-i18next";
import { useEffect } from "react";
import { globalStyle } from "./style";
import { Global } from "@emotion/react";
import { ModalGroup } from "./utils/model/src/modal-group";

const dragOptions = {
  enableTouchEvents: true,
  enableMouseEvents: true,
};

function App() {
  const currentUserLanguage = "en-US";
  // useSelector(getCurrentTranslateLanguage)

  const { i18n } = useTranslation();

  useEffect(() => {
    if (currentUserLanguage) {
      i18n.changeLanguage(currentUserLanguage);
    }
  }, [currentUserLanguage, i18n]);
  return (
    <div style={{ boxSizing: "border-box", overflow: "hidden" }}>
      <DndProvider backend={TouchBackend} options={dragOptions}>
        <ConfigProvider locale={enUS}>
        <Global styles={globalStyle} />
        <ModalGroup />
          <Editor />
        </ConfigProvider>
      </DndProvider>
    </div>
  );
}
export default App;
