#I LOVE YOU EVERDAY#

import {useState, useEffect} from "@wordpress/element";
import { Button, ToggleControl } from '@wordpress/components';
import * as rsssl_api from "../utils/api";
import { __ } from '@wordpress/i18n';
import update from 'immutability-helper';
import {useUpdateEffect} from 'react-use';
import Icon from "../utils/Icon";
import Placeholder from '../Placeholder/Placeholder';

const Onboarding = (props) => {
const [steps, setSteps] = useState([]);
const [overrideSSL, setOverrideSSL] = useState(false);
const [certificateValid, setCertificateValid] = useState(false);
const [sslActivated, setsslActivated] = useState(false);
const [activateSSLDisabled, setActivateSSLDisabled] = useState(true);
const [stepsChanged, setStepsChanged] = useState('');
const [networkwide, setNetworkwide] = useState(false);
const [networkActivationStatus, setNetworkActivationStatus] = useState(false);
const [networkProgress, setNetworkProgress] = useState(0);

useUpdateEffect(()=> {
        if ( networkProgress<100 && networkwide && networkActivationStatus==='main_site_activated' ){
            rsssl_api.runTest('activate_ssl_networkwide' ).then( ( response ) => {
               if (response.success) {
                    setNetworkProgress(response.progress);
                    if (response.progress>=100) {
                        updateActionForItem('ssl_enabled', '', 'success');
                    }
                }
            });
        }
    })

useEffect(() => {
        updateOnBoardingData(false);
    }, [])

setSteps(steps);
        setStepsChanged(true);
        setTimeout(function(){
            updateOnBoardingData(true)
        }, 1000) //add a delay, otherwise it's so fast the user may not trust it.
    }

return (
                <li key={index} >
                    <Icon name = {statusIcon} color = {statusColor} />
                    {title}
                    {id==='ssl_enabled' && networkwide && networkActivationStatus==='main_site_activated' && <>
                        &nbsp;-&nbsp;
                        {networkProgress<100 && <>{__("working", "really-simple-ssl")}&nbsp;{networkProgress}%</>}
                        {networkProgress>=100 && __("completed", "really-simple-ssl") }
                        </>}
                    {button && <>&nbsp;-&nbsp;
                    {showLink && <Button className={"button button-secondary"} isLink={true} onClick={() => itemButtonHandler(id, action)}>{buttonTitle}</Button>}
                    {!showLink && <>{buttonTitle}</>}
                    </>}
                </li>
            )
        })
    }

const goToDashboard = () => {
        if ( props.isModal ) props.dismissModal();
        props.selectMainMenu('dashboard');
    }

const goToLetsEncrypt = () => {
         if (props.isModal) props.dismissModal();
        window.location.href=rsssl_settings.letsencrypt_url;
    }

if ( ( steps.length>1 && steps[1].visible ) || steps[0].visible){
            return (
                <>
                <button className="button button-primary" onClick={() => {goToDashboard()}}>{__('Go to Dashboard', 'really-simple-ssl')}</button>
                <button className="button button-default" onClick={() => {props.dismissModal()}}>{__('Dismiss', 'really-simple-ssl')}</button>
                </>
            );
        }
    }

return (
        <>
            { !stepsChanged && <Placeholder lines="12"></Placeholder>}
            {
                stepsChanged && steps.map((step, index) => {
                    const {title, subtitle, items, info_text: infoText, visible} = step;
                    return (
                        <div className="rsssl-modal-content-step" key={index} style={{ display: visible ? 'block' : 'none' }}>
                            {title && <h2 className="rsssl-modal-subtitle">{title}</h2>}
                            {subtitle && <div className="rsssl-modal-description">{subtitle}</div>}
                            <ul>
                                { parseStepItems(items) }
                            </ul>
                            { certificateValid && infoText && <div className="rsssl-modal-description" dangerouslySetInnerHTML={{__html: infoText}} /> }
                            { !certificateValid &&
                                <div className="rsssl-modal-description">
                                   <a href="#" onClick={ (e) => refreshSSLStatus(e)}>
                                       { __("Refresh SSL status", "really-simple-ssl")}
                                   </a>&nbsp;{__("The SSL detection method is not 100% accurate.", "really-simple-ssl")}&nbsp;
                                   {__("If you’re certain an SSL certificate is present, and refresh SSL status does not work, please check “Override SSL detection” to continue activating SSL.", "really-simple-ssl")}
                                </div> }
                            <div className="rsssl-modal-content-step-footer">
                                {controlButtons()}
                            </div>

</div>
                    )
                })
            }
        </>
    )
}

export default Onboarding;