{% if not atom.doc.features.react_version or atom.doc.features.react_version > 17 %}
  import React from 'react';
  import { createRoot } from 'react-dom/client';
{% else %}
  import React from 'react';
  import ReactDOM from 'react-dom';
{% endif %}

{% if atom.doc.features.react_app_state_enabled===true %}
  import { Provider } from "@fnet/react-app-state";
{% endif%}

{% if atom.doc.features.app.extend===true %}
import Library from '../../../app';
{% elif atom.doc.features.multiple===true %}
const Library = React.Fragment;
{% else %}
import Library from '../../../src';
{% endif%}

export default function App(props) {
    return (
        {% if atom.doc.features.react_app_state_enabled===true %}
        <Provider>
        {% endif %}
            <Library {...props} />
        {% if atom.doc.features.react_app_state_enabled===true %}
        </Provider>
        {% endif %}
    )
}

{% if not atom.doc.features.react_version or atom.doc.features.react_version > 17 %}
const createApp = ({ container }) => {
    return (props) => {
        const root = createRoot(container);      
        root.render(<App {...props} />);
        return ()=> root.unmount();
    }
}
{% else %}
const createApp = ({ container }) => {
    return (props) => {
        ReactDOM.render(<App {...props} />, container);
        return () => ReactDOM.unmountComponentAtNode(container);
    }
}
{% endif %}

export { createApp };