import React from "react";
import ReactDOM from "react-dom/client";
import {Provider} from "react-redux";
import store from "./store/index";
import "../styles/main.scss";
import Index from "./app";
import {BrowserRouter} from "react-router-dom";
import SupportModule from "./app/SupportModule";

let root;
function ReactTalk(props) {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <SupportModule {...props}>
          <Index {...props}/>
        </SupportModule>
      </BrowserRouter>
    </Provider>
  );
}

function Talk(props, elementId, callBack) {
  root = ReactDOM.createRoot(document.getElementById(elementId));
  root.render(
    <Provider store={store}>
      <BrowserRouter>
        <SupportModule {...props}>
          <Index {...props} wrappedComponentRef={callBack}/>
        </SupportModule>
      </BrowserRouter>
    </Provider>);
}

function DestroyTalk() {
  root.unmount();
}

export {ReactTalk, Talk};

window.Talk = Talk;
window.DestroyTalk = DestroyTalk;