import { none } from 'html-webpack-plugin/lib/chunksorter';
import { observer } from 'mobx-react';
import React, { useContext, useEffect, useState } from 'react';
import { BsCheckCircle, BsExclamationCircle, BsFillLightningFill, BsXCircle } from 'react-icons/all';
import { toast } from 'react-toastify';
import useSWR from 'swr';
import { CALCUL_TIMEOUT_DELAY, STATUTS_CALCUL } from '../../constantes/constantes';
import AppConfigStore, { AppConfigContext } from '../../stores/AppConfigStore';

/**
 * Composant "Zone de calcul" affiché en haut à droite de l'interface, permettant de (re)lancer un calcul et d'indiquer l'état du dernier calcul lancé.
 *
 * @component
 */
const ZoneCalculs = observer(() => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);
    const getKey = () => appConfig.managers.decisions.buildCalculStatusKey(appConfig.idsSousViviersSelectionnees[0],appConfig.PAMSelectionne);
    const { data, error, mutate } = useSWR(getKey, { refreshInterval: 500 });

    // clé permettant d'identifier un calcul unique => sa date de lancement
    const [calculKey, setCalculKey] = useState(new Date());

    const hasTimeout = () => {
        if (typeof data != 'undefined') {
            if (data.statut == STATUTS_CALCUL.EN_COURS) {
                let calculStartDate = calculKey;
                if (typeof data.date_debut != 'undefined') calculStartDate = new Date(data.date_debut);

                let timeoutDate = new Date(calculStartDate.getTime() + CALCUL_TIMEOUT_DELAY);
                // let timeoutDate = new Date(calculStartDate.getTime() + 20000);
                let now = new Date();
                return now > timeoutDate;
            }
        }
        return false;
    };
    /**
     * Lancer les calculs sur le sous_vivier selectionner du gestionnaire
     */
    const lancerCalcul = async (e) => {
        e.preventDefault();
        const sousVivierId = appConfig.idsSousViviersSelectionnees[0];
        const pamId = appConfig.PAMSelectionne;
        const annee = appConfig.PAMSelectionne;
        const anneeA1 = appConfig.donneesReference.PAMByStatut.get('PAM A+1').pam_id;

        annee != anneeA1 && appConfig.setAdministreSelectifPamA(null);
        annee == anneeA1 && appConfig.setAdministreSelectifPamA1(null);

        annee != anneeA1 && appConfig.setPosteSelectifPamA(null);
        annee == anneeA1 && appConfig.setPosteSelectifPamA1(null);
        // statut = STATUTS_CALCUL.EN_COURS
        await mutate({ statut: STATUTS_CALCUL.EN_COURS },false);
        const ok = await appConfig.actionsMetierHelper.lanceCalculs(sousVivierId, pamId);
        // On met immédiatement à jour le statut pour que l'affichage soit également immédiatement mis à jour
        appConfig.setStatutCalculAideDecision(ok ? STATUTS_CALCUL.EN_COURS : STATUTS_CALCUL.ERREUR);
    };
    /**
     * Arreter les calculs sur le sous_vivier selectionner du gestionnaire
     */
    const arreterCalcul = async (e) => {
        e.preventDefault();
        const sousVivierId = appConfig.idsSousViviersSelectionnees[0];
        const pamId = appConfig.PAMSelectionne;

        // statut = STATUTS_CALCUL.EN_COURS
        await mutate({ statut: STATUTS_CALCUL.EN_ATTENTE_ARRET },false);
        const ok = await appConfig.actionsMetierHelper.arretCalculs(sousVivierId, pamId);
        // On met immédiatement à jour le statut pour que l'affichage soit également immédiatement mis à jour
        appConfig.setStatutCalculAideDecision(ok ? STATUTS_CALCUL.EN_ATTENTE_ARRET : STATUTS_CALCUL.ERREUR);
    };

    const isCalcul = true ? appConfig.idsSousViviersSelectionnees.length==1 : false;

    if (isCalcul){
        return (
            <div className="mr-4">
                {!data ? (
                    error ? (
                        'Une erreur est survenue'
                    ) : (
                        <div className="spinner-border" role="status" />
                    )
                ) : data && data.statut && [STATUTS_CALCUL.AUCUN, STATUTS_CALCUL.TERMINE_DE_FORCE, STATUTS_CALCUL.TERMINE, STATUTS_CALCUL.EN_ATTENTE].includes(data.statut) ? (
                    data.statut == STATUTS_CALCUL.TERMINE ? (
                        <span>
                            <span style={{ color: 'green' }}>
                                <BsCheckCircle /> Calcul terminé !
                            </span>{' '}
                            <a href="#" onClick={lancerCalcul}>
                                <BsFillLightningFill size={22} />
                                Relancer les calculs
                            </a>
                        </span>
                    ): data.statut == STATUTS_CALCUL.EN_ATTENTE ? (
                        <span className="calculsEnCours">
                        <div className="spinner-border" role="status" />
                        <span> Calculs en attente...</span>
                        <a href="#" onClick={arreterCalcul}>
                                <BsFillLightningFill size={22} />
                                Arreter les calculs
                        </a>
                    </span>
                    ) : data.statut == STATUTS_CALCUL.TERMINE_DE_FORCE ? (
                        <span>
                            <span style={{ color: 'green' }}>
                                <BsCheckCircle /> Calcul arrêté !
                            </span>{' '}
                            <a href="#" onClick={lancerCalcul}>
                                <BsFillLightningFill size={22} />
                                Relancer les calculs de nouveau
                            </a>
                        </span>
                    ) : (
                        <a href="#" onClick={lancerCalcul}>
                            <BsFillLightningFill size={22} />
                            Lancer les calculs
                        </a>
                    )
                ) : data.statut == STATUTS_CALCUL.ERREUR ? (
                    <span>
                        <span style={{ color: 'orange' }}>
                            <BsXCircle /> Pas de matching
                        </span>{' '}
                        <a href="#" onClick={lancerCalcul}>
                            <BsFillLightningFill size={22} />
                            Relancer les calculs
                        </a>
                    </span>
                // ) : data.statut == STATUTS_CALCUL.ERREUR_ADMINISTRE ? (
                //     <span>
                //         <span style={{ color: 'red' }}>
                //             <BsXCircle /> Calcul échoué !
                //         </span>{' '}
                //         <a href="#" onClick={lancerCalcul}>
                //             <BsFillLightningFill size={22} />
                //             Relancer les calculs
                //         </a>
                //     </span>
                // ) : data.statut == STATUTS_CALCUL.ERREUR_POSTE ? (
                //     <span>
                //         <span style={{ color: 'red' }}>
                //             <BsXCircle /> Calcul échoué !
                //         </span>{' '}
                //         <a href="#" onClick={lancerCalcul}>
                //             <BsFillLightningFill size={22} />
                //             Relancer les calculs
                //         </a>
                //     </span>

                ) : data.statut == STATUTS_CALCUL.EN_ATTENTE_ARRET ? (
                    <span className="calculsEnCours">
                        <div className="spinner-border" role="status" />
                        <span> Calcul en arret ...</span>
                    </span>
                ) : hasTimeout() ? (
                    <span>
                        <span style={{ color: 'orange' }}>
                            <BsExclamationCircle /> Le calcul tourne depuis +1h
                        </span>{' '}
                        <a href="#" onClick={lancerCalcul}>
                            <BsFillLightningFill size={22} />
                            Relancer les calculs
                        </a>
                    </span>
                ) : (
                    <span className="calculsEnCours">
                        <div className="spinner-border" role="status" />
                        <span> Calculs en cours    </span>
                        <span>     </span>
                        <progress value={data.statut_pourcentage} max ={100}/>
                        <span>{data.statut_pourcentage}%</span>
                        <a href="#" onClick={arreterCalcul}>
                                <BsFillLightningFill size={22} />
                                Arreter les calculs
                        </a>
                    </span>
                )}
            </div>
        );
        };
});

export default ZoneCalculs;
