/* eslint-disable react/display-name */
import React from 'react';
import ReactDOM from 'react-dom/client';
import { i18nextReactInitConfig } from '@brojs/cli';
import i18next from 'i18next';

import App from './app';

i18next.t = i18next.t.bind(i18next);
const i18nextPromise = i18nextReactInitConfig(i18next);
export default () => <App />;

let rootElement: ReactDOM.Root;

export const mount = async (
  Component,
  element = document.getElementById('app'),
) => {
  const rootElement = ReactDOM.createRoot(element);
  await i18nextPromise;
  rootElement.render(<Component />);
  if (module.hot) {
    module.hot.accept('./app', async () => {
      await i18next.reloadResources();
      rootElement.render(<Component />);
    });
  }
};

export const unmount = () => {
  rootElement.unmount();
};