#I LOVE YOU EVERDAY#

import {useState, useEffect} from "@wordpress/element";
import * as rsssl_api from "../utils/api";
import Onboarding from "./Onboarding";
import update from 'immutability-helper';
import {useUpdateEffect} from 'react-use';
import Placeholder from '../Placeholder/Placeholder';
import { __ } from '@wordpress/i18n';
import Icon from "../utils/Icon";
const OnboardingModal = (props) => {
    const [modalLoaded, setModalLoaded] = useState(false);
    useEffect(() => {
        if ( !modalLoaded ) {
            rsssl_api.runTest('get_modal_status' ).then( ( response ) => {
                setModalLoaded(true);
                props.setShowOnBoardingModal(!response.dismissed);
            });
        }
    });

useUpdateEffect(()=> {
        if (props.showOnBoardingModal===true) {
            let data={};
            data.dismiss = false;
            rsssl_api.runTest('dismiss_modal', 'refresh', data).then(( response ) => {});
        }
    });

<div className="rsssl-modal-content">
                        { !props.isAPILoaded &&
                             <>
                                <ul>
                                    <li><Icon name = "file-download" color = 'orange' />{__("Please wait while we detect your setup", "really-simple-ssl")}</li>
                                </ul>
                                <Placeholder lines="10"></Placeholder>
                            </>
                         }
                        { props.isAPILoaded &&
                            <Onboarding
                                getFields={props.getFields}
                                updateField={props.updateField}
                                selectMainMenu={props.selectMainMenu}
                                isModal={true}
                                dismissModal={dismissModal}/>
                                }
                    </div>

<div className="rssl-modal-footer"/>
                </div>
            </> }
        </>
    )
}

export default OnboardingModal;