import Tippy from '@tippyjs/react';
import { useState } from 'react';
import { useEffect } from 'react';
import { observer } from 'mobx-react';
import React, { useContext } from 'react';
import { BsFileEarmarkRuled, BsGear, BsLock, BsPeople, BsPower, BsTools, FaEraser, IoReload, IoArrowForwardOutline, IoTrashBin, BsFilePlus, BsFillTrashFill } from 'react-icons/all';
import { Modal } from 'react-overlays';
import { BiLoader } from 'react-icons/bi';
import { PROFILS, PAM_A, PAM_SUIVANT } from '../../constantes/constantes';
import AppConfigStore, { AppConfigContext } from '../../stores/AppConfigStore';
import { GenericNavigationSelect } from '../EnteteVues/GenericNavigationSelect';
import './EntetePage.scss';
import { PopupService } from 'ag-grid-community';
import CalculsPopinEditor from '../Commun/editors/calculs/CalculsPopinEditor';
/**
 * Composant d'en-tête de l'application Ogure NG.
 *
 * @component
 * @example
 * return (
 * <EntetePage />
 * )
 */

const EntetePage = observer(() => {
    /** @type {AppConfigStore} */
    const appConfig = useContext(AppConfigContext);

    const razParametresAffichage = (e) => {
        e.preventDefault();
        localStorage.clear();
        window.location.reload();
    };

    const pamChoix = [
    { id: PAM_A, label: 'PAM A' },
    { id: PAM_SUIVANT, label: 'PAM A+1' },
    ];

    const [pam, setPam] = useState([]);

    useEffect(()=>{
        const data = localStorage.getItem("filtre-Pam");
        if (data) {
          setPam(JSON.parse(data));
        }
      }, []);

    useEffect(()=>{
        localStorage.setItem("filtre-Pam", JSON.stringify(pam));
        appConfig.setPAMSelectionne(pam)
    }, [pam]); 

    const message = (e) => {
        e.preventDefault();
        "Hello ! "
    };

    return (
        <header role="banner" className="fr-header">
            <div className="fr-header__body">
                <div className="fr-container--fluid fr-px-2v">
                    <div className="fr-header__body-row pt-0 pb-0">
                        <div className="fr-header__brand fr-enlarge-link">
                            <div className="fr-header__brand-top">
                                <div className="fr-header__logo">
                                    <p className="fr-logo">
                                        République
                                        <br />
                                        Française
                                    </p>
                                </div>
                                <div className="fr-header__navbar">
                                    <button
                                        className="fr-btn--menu fr-btn"
                                        data-fr-opened="false"
                                        aria-controls="modal-833"
                                        aria-haspopup="menu"
                                        title="Menu"
                                        id="fr-btn-menu-mobile"
                                    >
                                        Menu
                                    </button>
                                </div>
                            </div>
                            <div className="fr-header__service">
                                <img src={'assets/images/ogure.png'} title="Ogure NG" style={{ maxHeight: 75 }} />
                                <button style={{ color: 'blue' }}>v2.13.2</button>
                            </div>
                            <>
                               
                            </>
                        </div>
                        <label htmlFor="pamSelect" className="ml-4 mb-0">
                                    PAM
                        </label>
                        <div className="form-floating px-2">
                            <select
                                className="form-control"
                                id="pamSelect"
                                onChange={({ target }) => setPam(target.value)}
                                value={appConfig.PAMSelectionne ?? undefined}
                            >
                                {appConfig.donneesReference.pams.map((choix) => (
                                    <option value={choix.pam_id} key={choix.pam_id}>
                                        {choix.pam_id}
                                    </option>
                                ))}
                            </select>
                        </div>
                        <div className="fr-header__tools p-0">
                            <div className="fr-header__tools-links m-0">
                                {appConfig.utilisateurConnecte ? (
                                    <ul className="fr-links-group m-0">
                                        <li className="identiteUtilisateur">
                                            {appConfig.utilisateurConnecte.grade} {appConfig.utilisateurConnecte.last_name?.toUpperCase()}{' '}
                                            {appConfig.utilisateurConnecte.first_name}
                                        </li>
                                        <li>
                                            <Tippy content="Recharge les données de la page">
                                                <a className="fr-link" href="#" onClick={appConfig.toggleDonneesRecharger()}>
                                                    <IoReload />
                                                </a>
                                            </Tippy>
                                        </li>
                                        <li>
                                            <Tippy content="Réinitialiser tous les paramètres d'affichage à leur réglage par défaut">
                                                <a className="fr-link" href="#" onClick={razParametresAffichage}>
                                                    <FaEraser />
                                                </a>
                                            </Tippy>
                                        </li>
                                        <li>
                                            <Tippy content="Modifier mon mot de passe (nouvel onglet}">
                                                <a className="fr-link" href={'/accounts/password_change'} target="_blank">
                                                    <BsLock />
                                                </a>
                                            </Tippy>
                                        </li>
                                        {appConfig.hasProfil(PROFILS.SUPER) && (
                                            <>
                                                <li className="roleUtilisateur">
                                                    <Tippy content="Accéder à l'administration (nouvel onglet)">
                                                        <a href={'/admin'} className="fr-link" target="_blank">
                                                            <BsGear />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                                <li className="roleSuppression">
                                                    <Tippy content="Supprimer les données en erreur">
                                                        <a href={'/api/suppression'} className="fr-link" target="_blank">
                                                            <BsFillTrashFill />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                                <li>
                                                    <Tippy content="Initialiser un nouveau PAM">
                                                        <a href={'/api/chargement_pam'} className="fr-link" target="_blank">
                                                            <IoArrowForwardOutline />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                                <li>
                                                    <Tippy content="Nettoyer le PAM (Suppression des postes SUP REO du PAM A) ">
                                                        <a href={'/api/nettoyage_pam'} className="fr-link" target="_blank">
                                                            <IoTrashBin />
                                                        </a>
                                                    </Tippy>
                                                </li>                                                
                                                <li>
                                                    <Tippy content="Charger les données de l'application (nouvel onglet)">
                                                        <a href={'/api/alimentation'} className="fr-link" target="_blank">
                                                            <BsFileEarmarkRuled />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                                <li>
                                                    <Tippy content="Charger les référentiels de droits (nouvel onglet)">
                                                        <a href={'/api/alimentation_ref_droits'} className="fr-link" target="_blank">
                                                            <BsPeople />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                                <li>
                                                    <Tippy content="Charger les compétences des administrés (nouvel onglet)">
                                                        <a href={'/api/chargement_competences'} className="fr-link" target="_blank">
                                                            <BsTools />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                                <li>
                                                    <Tippy content="Exporter les données en format excel">
                                                        <a className="fr-link" href={'/api/exportation_fichiers'} target="_blank">
                                                            <BsFilePlus />
                                                        </a>
                                                    </Tippy>
                                                </li>
                                            </>
                                        )}
                                        <li>
                                            <Tippy content={'Me déconnecter'}>
                                                <a href="/accounts/logout" className="fr-link">
                                                    <BsPower />
                                                </a>
                                            </Tippy>
                                        </li>
                                    </ul>
                                ) : (
                                    <ul className="fr-links-group">
                                        <a href="#" className="withIcon text-white">
                                            {/*FIXME à supprimer*/}
                                            <BiLoader />
                                        </a>
                                    </ul>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    );
});

export default EntetePage;
