import React from 'react';
import ReactDOM from 'react-dom';
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import App from './App';
import config from './config.yml';

// Get mounting point of the form
const mountingElementId = config.mountingElementId;

if (!mountingElementId)
  throw Error(
    "Can't initialise contact form, please set an id of an DOM element you " +
      ' want to mount the form in, in the config file, under key:' +
      '`mountingElementId`',
  );

const root = document.getElementById(mountingElementId);

if (root === null)
  throw Error(
    `Can't initialise contact form, root with id: ${mountingElementId}` +
      ' element missing.',
  );

// Init i18n with the lang attribute of the mounting point, default to English.
i18next.use(initReactI18next).init({
  resources: config.localisations,
  lng: root.getAttribute('lang') || 'en',
  interpolation: {
    escapeValue: false,
  },
});

// Render the form.
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  root,
);