import { DndProvider } from "react-dnd";
import { TouchBackend } from "react-dnd-touch-backend";
import { useTranslation } from "react-i18next";
import { useEffect } from "react";
import { Global } from "@emotion/react";
import { ConfigProvider, enUS } from "@/utils/configProvider";
import { globalStyle } from "@/style";
import { ModalGroup } from "@/utils/model/src";
import Editor from "@/page/app";
import { Provider } from "react-redux";
import store from "@/store";
import { HTML5Backend } from "react-dnd-html5-backend";

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

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

  const { i18n } = useTranslation();

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