import React, { FunctionComponent, useEffect } from 'react';

import * as ReactDomServer from 'react-dom/server';

import { Header } from 'Components/header/Header';
import CustomElement from 'Components/custom-element/CustomElement';
import EmotionStyled from 'Components/emotion-styled/EmotionStyled';
import Themed from 'Components/themed/Themed';

import { theme2 } from '../themes/theme-two';
import { theme } from '../themes/theme-one';

import { ThemeProvider } from '@emotion/react';

export const RootComponent: FunctionComponent = () => {
  useEffect(() => {
    const renderedComponent = ReactDomServer.renderToString(<EmotionStyled isMarked={true} />);
    console.log(renderedComponent);

    const divToInsert = document.getElementById('rendered');
    if (!divToInsert) return;
    divToInsert.innerHTML = renderedComponent;

    const anotherDivToInsert = document.getElementById('another-rendered');
    if (!anotherDivToInsert) return;
    anotherDivToInsert.innerHTML = renderedComponent;

    console.log(divToInsert, anotherDivToInsert);
  }, []);

  const siteManagement = (
    <ThemeProvider theme={theme}>
      <Header />
      <CustomElement isHere={true} />
      <hr style={{ margin: '30px 0', height: '300px' }} />
      <EmotionStyled />
      <hr style={{ margin: '30px 0', height: '300px' }} />
      <Themed label="not a default one" />
    </ThemeProvider>
  );

  return <div className="main_wrapper">{siteManagement}</div>;
};