/**
 * 
 * Component Loader is ins
 * 
 */


import React, { Suspense, useState, useEffect } from "react";

// import { BrowserRouter } from "react-router-dom";

// import "./index.css";

import { ComponentWrapper } from "../../components/component-wrapper/component-wrapper";



const App = () => {

    // Configuration to store the env of the application
    const [configuration, setConfiguration] = useState({});

    useEffect(() => {

        loadConfiguration();

    }, [])

    /**
     * Load the configuration 
     */
    async function loadConfiguration() {


        let domain = "qms-dubai";
        // let domain = window.location.host.split(".")[0];

        const result = await fetch(`https://hgrntky25ejsmw3zobq3u6lk3q0tploo.lambda-url.ap-northeast-1.on.aws/?domain=${domain}`).then((result) => {
            return result.json();
        })

        if (result.length && result[0].other_details) {

            let appConfiguration = JSON.parse(result[0].other_details);

            console.log(appConfiguration);



            console.log("Starting application with ", appConfiguration);

            window.process = {
                env: appConfiguration
            }

            // Setting the title
            document.title = appConfiguration.REACT_APP_WEBSITE_NAME

            setConfiguration({
                ...appConfiguration,
            });

        }
    }

    return (<ComponentLoader configuration={configuration} />)


    // return (
    //   <Suspense fallback={<div>Loading now...</div>}>

    //     {/* Component Wrapper */}
    //     <ComponentWrapper component={configuration} {...configuration} />
    //     {/* Component Wrapper Ends */}

    //   </Suspense>
    // )
};

/**
 * Realizing the MFE setup can do not just load applications , 
 * It can also be used foro loading component on fly 
 * 
 */
export function ComponentLoader({ configuration }) {


    window.process = {
        env: configuration
    }

    console.log('here 5.2',configuration);

    let component = {
        "url": "http://localhost:8085/remoteEntry.js",
        // "url": "https://qms-soxo.web.app/remoteEntry.js",
        // "url": "http://localhost:9090/remoteEntry.js",
        // "url": configuration.REACT_APP_URL,
        "scope": "Application",
        // "scope": "ReportingUI",
        "name": "Tokens",
        "props": {
            "props1": "propsvalue"
        }
    }

    return (<>

        <Suspense fallback={<div>Loading now...</div>}>

            {/* Component Wrapper */}
            <ComponentWrapper component={configuration} {...configuration} />
            {/* Component Wrapper Ends */}

        </Suspense>

    </>)

}



export default App;


