import dayjs from 'dayjs';
import { observer } from 'mobx-react';
import { nanoid } from 'nanoid';
import React, { useEffect, useState } from 'react';
import ReactHtmlParser from 'react-html-parser';
import { RiCloseCircleFill } from 'react-icons/all';
import { Modal } from 'react-overlays';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
import useSWR from 'swr';
import i18n from '../../../i18n/i18n';
import AppConfigStore from '../../../stores/AppConfigStore';
import { Chargement } from '../Chargement';
import { Erreur } from '../Erreur';
import './FicheDetaillee.scss';
import { ComplexDateDisplay, InfoDisplay } from './ficheDetailleeHelpers';
import { mapDataAdministreForFicheDetaillee } from './ficheDetailleeMappingAdministre';

/**
 * Composant présentant la fiche détaillée d'un administré.
 *
 * @component
 * @param {array} props.appConfig - Le contexte d'affichage de la liste avec les données de références et l'administré affiché
 *
 * @example
 * return (
 * <FicheDetailleeAdministre appConfig={appConfig} />
 * )
 */
const FicheDetailleeAdministre = observer((props) => {
    /** @type {AppConfigStore} */
    const appConfig = props.appConfig;

    let today = new Date(Date.now());
    let datePAMActuel = new Date('August 1, ' + today.getFullYear());
    const anneePAM = today.getTime() > datePAMActuel.getTime() ? datePAMActuel.getFullYear() + 1 : datePAMActuel.getFullYear();
    const datePAM = '01/08/' + anneePAM.toString();

    const [isOpen, setIsOpen] = useState(true);

    const annee = appConfig.PAMSelectionne;
    const params = {};
    annee && (params.pam__in = annee);
    const getKey = () => appConfig.managers.administres.buildFicheDetailleeCallKey(appConfig.administreFicheDetaillee, params);
    const { data, error } = useSWR(getKey);
    const [administreDetails, setAdministreDetails] = useState(undefined);

    const CHAMP_VIDE = i18n.global.donnees.vide;

    useEffect(() => {
        if (data) {
            const ad = mapDataAdministreForFicheDetaillee(appConfig.donneesReference, data);
            setAdministreDetails(ad);
        }
    }, [data]);

    const resetDetailsAndCloseModal = () => {
        appConfig.setAdministreFicheDetaillee(undefined);
        setIsOpen(false);
    };

    const Backdrop = () => {
        return <div className="Backdrop" onClick={() => resetDetailsAndCloseModal()} />;
    };

    return (
        <Modal className="FicheDetailleeModal" show={isOpen} renderBackdrop={Backdrop} /*enforceFocus={false}*/>
            <>
                {/* FIXME fixer le titre et le bouton exit en haut de la modale (ne fonctionne pas avec css fixed) */}
                <div className="FicheDetailleeHeader">
                    {administreDetails && (
                        <h3>
                            {administreDetails.entete_identiteMatricule + ' '} &mdash;
                            {' ' +
                                administreDetails.entete_identiteGrade +
                                ' ' +
                                administreDetails.entete_identiteNom +
                                ' ' +
                                administreDetails.entete_identitePrenom}
                        </h3>
                    )}

                    <div className="ExitButton" onClick={() => resetDetailsAndCloseModal()}>
                        <RiCloseCircleFill />
                        <span>Fermer</span>
                    </div>
                </div>

                <div className="FicheDetailleeBody">
                    {!administreDetails && (error ? <Erreur /> : <Chargement />)}
                    {administreDetails && (
                        <>
                            <div className="InfosPerso">
                                <h5>Informations personnelles</h5>
                                <div className="InfoRow">
                                    <div className="InfoColumn">
                                        <InfoDisplay label={'SAP'} text={administreDetails.entete_identiteMatricule} />
                                        <InfoDisplay label={'IdDef'} text={administreDetails.entete_idDef} />
                                        <InfoDisplay label={'Date Jour'} text={dayjs(Date.now()).format('DD/MM/YYYY')} />
                                    </div>
                                    <div className="InfoColumn">
                                        <InfoDisplay label={'Grade'} text={administreDetails.entete_identiteGrade} />
                                        <InfoDisplay label={'Date de naissance'} text={administreDetails.entete_identiteDateNaissance} />
                                        <InfoDisplay label={'Date PAM'} text={datePAM} />
                                    </div>
                                    <div className="InfoColumn">
                                        <InfoDisplay
                                            label={'Nom/Prénom'}
                                            text={administreDetails.entete_identiteNom + ' ' + administreDetails.entete_identitePrenom}
                                        />
                                        <InfoDisplay
                                            label={'Age'}
                                            text={
                                                administreDetails.entete_identiteAge > 1
                                                    ? administreDetails.entete_identiteAge + ' ans'
                                                    : administreDetails.entete_identiteAge + ' an'
                                            }
                                        />
                                        <InfoDisplay label={'Année A'} text={dayjs(Date.now()).format('YYYY')} />
                                    </div>
                                    <div className="InfoColumn">
                                        <InfoDisplay label={'Arme'} text={administreDetails.entete_arme} />
                                        <InfoDisplay
                                            label={'Sexe'}
                                            text={i18n.administreDetails.sexe[administreDetails.entete_identiteSexe || 'NC']}
                                        />
                                        <InfoDisplay label={'Millésime'} text={administreDetails.formob_millesime} />
                                    </div>
                                    <div className="InfoColumn" style={{ justifyContent: 'flex-end' }}>
                                        <InfoDisplay label={'Marquant PN'} text={administreDetails.entete_marqueur_pn} />
                                        <InfoDisplay label={'NID'} text={administreDetails.entete_NID} />
                                    </div>
                                </div>
                                <div className="InfoColumn">
                                    <h5>Echéances</h5>
                                    <div className="InfoRow">
                                        <div className="InfoColumn">
                                            <ComplexDateDisplay
                                                label={'Date grade'}
                                                type={'Temps'}
                                                date={administreDetails.entete_dateGrade}
                                                temps={administreDetails.entete_tempsDateGrade}
                                            />
                                            <ComplexDateDisplay
                                                label={'Date entrée service'}
                                                type={'Temps'}
                                                date={administreDetails.entete_dateEntreeService}
                                                temps={administreDetails.entete_tempsEntreeService}
                                            />
                                            <ComplexDateDisplay
                                                label={'Date RDC'}
                                                type={'Reste'}
                                                date={administreDetails.entete_dateRDC}
                                                temps={administreDetails.entete_tempsRDC}
                                            />
                                            <ComplexDateDisplay
                                                label={'Date entrée FE'}
                                                type={'Temps'}
                                                date={administreDetails.entete_dateEntreeFE}
                                                temps={administreDetails.entete_tempsDateEntreeFE}
                                                auPAM={anneePAM}
                                            />
                                            <ComplexDateDisplay
                                                label={'Date dernier ACR'}
                                                type={'Temps'}
                                                date={administreDetails.entete_dateDernierACR}
                                                temps={administreDetails.entete_tempsDernierACR}
                                                auPAM={anneePAM}
                                            />
                                        </div>
                                        <div className="InfoColumn">
                                            <InfoDisplay label={'Recrutement'} text={administreDetails.entete_recrutement} />
                                            <InfoDisplay label={'Interruption de service'} text={administreDetails.entete_dateInterruptionService} />
                                            <InfoDisplay label={'Corps Statut'} text={administreDetails.entete_corpsStatut} />
                                            <InfoDisplay label={'Compétences'} text={administreDetails.entete_competences} />
                                        </div>
                                        <div className="InfoColumn">
                                            <InfoDisplay label={'Emploi occupé'} text={administreDetails.entete_emploiOccupe} />
                                            <InfoDisplay label={'EIP'} text={administreDetails.entete_EIP} />
                                            <InfoDisplay label={'EIS'} text={administreDetails.entete_EIS} />
                                            <InfoDisplay label={'PLS GB Max'} text={administreDetails.entete_PLSGBMax} />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <Tabs>
                                <TabList>
                                    <Tab>FORMOB/FEMP</Tab>
                                    <Tab>Affectations/Fonctions</Tab>
                                    <Tab>Famille</Tab>
                                    <Tab>Diplômes</Tab>
                                    <Tab>FUD</Tab>
                                    <Tab>Notation</Tab>
                                </TabList>

                                <TabPanel>
                                    <div className={'TabPanel'}>
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Départements souhaités</h5>
                                                {administreDetails.formob_departementsSouhaites.length
                                                    ? administreDetails.formob_departementsSouhaites.map((fe, index) => (
                                                          <InfoDisplay key={nanoid()} label={index + 1} text={fe} />
                                                      ))
                                                    : CHAMP_VIDE}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Fonction d'emploi</h5>
                                                {administreDetails.formob_cinqFonctionsEmploi.map((fe, index) => (
                                                    <InfoDisplay key={nanoid()} label={index + 1} text={fe} />
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Commune d'emploi</h5>
                                                {administreDetails.formob_cinqCommunesEmploi.map((fe, index) => (
                                                    <InfoDisplay key={nanoid()} label={index + 1} text={fe} />
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Priorisation</h5>
                                                {administreDetails.formob_cinqPriorisationsEmploi.map((fe, index) => (
                                                    <InfoDisplay key={nanoid()} label={index + 1} text={fe} />
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Commentaires de la DRHAT</h5>
                                                <div className="ChampTexte" style={{ height: '8.5em', width: '15vw' }}>
                                                    {ReactHtmlParser(administreDetails.formob_commentaireDRHAT)}
                                                </div>
                                            </div>
                                        </div>
                                        <hr />
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Soldat</h5>
                                                <InfoDisplay label={'Spécialité'} text={administreDetails.formob_specialiteSoldat} />
                                                <InfoDisplay label={'CIAT'} text={administreDetails.formob_CIATSoldat} />
                                                <InfoDisplay label={'Int Bassin'} text={administreDetails.formob_intBassinSoldat} />
                                                <InfoDisplay label={'Ext Bassin'} text={administreDetails.formob_extBassinSoldat} />
                                                <InfoDisplay label={'TSHM'} text={administreDetails.formob_TSHMSoldat} />
                                                <InfoDisplay label={'Rec Particulier'} text={administreDetails.formob_recParticulierSoldat} />
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Commandement</h5>
                                                <InfoDisplay label={'Spécialité'} text={administreDetails.formob_specialiteCommandemant} />
                                                <InfoDisplay label={'CIAT'} text={administreDetails.formob_CIATCommandemant} />
                                                <InfoDisplay label={'Int Bassin'} text={administreDetails.formob_intBassinCommandemant} />
                                                <InfoDisplay label={'Ext Bassin'} text={administreDetails.formob_extBassinCommandemant} />
                                                <InfoDisplay label={'TSHM'} text={administreDetails.formob_TSHMCommandemant} />
                                                <InfoDisplay label={'Rec Particulier'} text={administreDetails.formob_recParticulierCommandemant} />
                                                <InfoDisplay label={'CDC FAV Mutation'} text={administreDetails.formob_CDCFAVMutationCommandemant} />
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Remarques de l'intéressé</h5>
                                                <div className="ChampTexte" style={{ height: '7em', width: '20vw' }}>
                                                    {ReactHtmlParser(administreDetails.formob_remarqueInteresse)}
                                                </div>
                                                <h5 className="ChampHeader">Avis du commandement</h5>
                                                <div className="ChampTexte" style={{ height: '7em', width: '20vw' }}>
                                                    {ReactHtmlParser(administreDetails.formob_avisCommandemant)}
                                                </div>
                                            </div>
                                        </div>
                                        <hr />
                                        <div className="InfoRow">
                                            <InfoDisplay
                                                label={"OBS ou Prévision d'affectation"}
                                                text={administreDetails.formob_OBSouPrevisionAffectation}
                                            />
                                        </div>
                                    </div>
                                </TabPanel>
                                <TabPanel>
                                    <div className={'TabPanel'}>
                                        <div className="InfoRow">
                                            <InfoDisplay label={'Le'} text={dayjs(Date.now()).format('DD/MM/YYYY')} />
                                            <InfoDisplay label={'Credo'} text={administreDetails.affectationsfonctions_credo} />
                                            <InfoDisplay label={'Garnison'} text={administreDetails.affectationsfonctions_garnison} />
                                        </div>
                                        <hr />
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Historique des Affectations</h5>
                                                {administreDetails.affectations_historique.map((a, index) => (
                                                    <InfoDisplay key={nanoid()} label={index + 1} text={a} />
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Date des Affectations</h5>
                                                {administreDetails.affectations_date_historique.map((a, index) => (
                                                    <p key={nanoid()}>{a ?  dayjs(a).format('DD/MM/YYYY') : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Historique des Fonctions</h5>
                                                {administreDetails.fonctions_historique.map((a, index) => (
                                                    <InfoDisplay key={nanoid()} label={index + 1} text={a} />
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <h5 className="ChampHeader">Date des Fonctions</h5>
                                                {administreDetails.fonctions_date_historique.map((a, index) => (
                                                    <p key={nanoid()}>{a ?  dayjs(a).format('DD/MM/YYYY') : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                        </div>
                                        <hr />
                                        <InfoDisplay
                                            label={'Position statuaire au '}
                                            text={administreDetails.affectationsfonctions_datePositionStatuaire}
                                        />
                                    </div>
                                </TabPanel>
                                <TabPanel>
                                    <div className={'TabPanel'}>
                                        <h5 className="ChampHeader">Famille</h5>
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <InfoDisplay label={'Situation familiale'} text={administreDetails.famille_situation} />
                                                <InfoDisplay label={'Profession du conjoint'} text={administreDetails.famille_professionConjoint} />
                                            </div>
                                            <div className="InfoColumn">
                                                <InfoDisplay label={'Date'} text={administreDetails.famille_date} />
                                                <InfoDisplay label={'Sexe du conjoint'} text={administreDetails.famille_sexeConjoint} />
                                            </div>
                                            <div className="InfoColumn">
                                                <InfoDisplay label={"Nombre d'enfants"} text={administreDetails.famille_nbEnfants} />
                                            </div>
                                            <div className="InfoColumn">
                                                <InfoDisplay label={"Info sur les enfants"} text={administreDetails.famille_infoEnfants} />
                                            </div>
                                        </div>
                                        <h5 className="ChampHeader">Complément conjoint</h5>
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <InfoDisplay label={'Grade'} text={administreDetails.famille_gradeConjoint} />
                                                <InfoDisplay label={'Nom'} text={administreDetails.famille_nomConjoint} />
                                                <InfoDisplay label={'Prénom'} text={administreDetails.famille_prenomConjoint} />
                                                <InfoDisplay label={'SAP'} text={administreDetails.famille_SAPConjoint} />
                                                <InfoDisplay label={'NID'} text={administreDetails.famille_NIDConjoint} />
                                            </div>
                                            <div className="InfoColumn">
                                                <InfoDisplay label={'CREDO FE'} text={administreDetails.famille_credoFEConjoint} />
                                                <InfoDisplay label={'FE'} text={administreDetails.famille_FEConjoint} />
                                                <InfoDisplay label={'Garnison'} text={administreDetails.famille_garnisonConjoint} />
                                                <InfoDisplay label={'Fmobé'} text={administreDetails.famille_fmobeConjoint} />
                                            </div>
                                        </div>
                                    </div>
                                </TabPanel>
                                <TabPanel>
                                    <div className={'TabPanel'}>
                                        <div className="InfoRow">
                                            <InfoDisplay
                                                label={'Diplôme militaire le plus haut'}
                                                text={administreDetails.diplomes_diplMiliLePlusHaut}
                                            />
                                            <InfoDisplay label={'Dernier diplôme militaire'} text={administreDetails.diplomes_dernierDiplMili} />
                                        </div>
                                        <hr />
                                        <h5 className="ChampHeader">Diplômes militaires (10 derniers)</h5>
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <p>
                                                    <strong>Diplômes militaires</strong>
                                                </p>
                                                {administreDetails.diplomes_dixDerniersDiplMili.map((d, index) => (
                                                    <p key={nanoid()}>{d ? d : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <p>
                                                    <strong>Date</strong>
                                                </p>
                                                {administreDetails.diplomes_dixDatesDerniersDipl.map((d, index) => (
                                                    <p key={nanoid()}>{d ? dayjs(d).format('DD/MM/YYYY') : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <p>
                                                    <strong>Note</strong>
                                                </p>
                                                {administreDetails.diplomes_dixNotesDerniersDipl.map((d, index) => (
                                                    <p key={nanoid()}>{d || d === 0.0 ? d : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </TabPanel>
                                <TabPanel>
                                    <div className={'TabPanel'}>
                                        <div className="InfoRow">
                                            <div className="InfoColumn">
                                                <p>
                                                    <strong>Demande</strong>
                                                </p>
                                                {administreDetails.fud_dixLibelle.map((d, index) => (
                                                    <p key={nanoid()}>{d ? d : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <p>
                                                    <strong>Date début</strong>
                                                </p>
                                                {administreDetails.fud_dixDatesDebut.map((d, index) => (
                                                    <p key={nanoid()}>{d ?  dayjs(d).format('DD/MM/YYYY') : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                            <div className="InfoColumn">
                                                <p>
                                                    <strong>Date Fin</strong>
                                                </p>
                                                {administreDetails.fud_dixDatesFin.map((d, index) => (
                                                    <p key={nanoid()}>{d ?  dayjs(d).format('DD/MM/YYYY') : i18n.global.donnees.vide}</p>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </TabPanel>
                                <TabPanel>
                                <div className="InfoRow">
                                            <InfoDisplay label={'Lien en service'} text={administreDetails.lien_en_service} />
                                </div>
                                <hr />
                                <table className="administreNotation">
                                    <tbody>
                                        <tr>
                                            <th>Année</th>
                                            {administreDetails.anne_de_notation.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>Age</th>
                                            {administreDetails.no_age_annees.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>IRIS</th>
                                            {administreDetails.a_iris.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>IRIS cumulé</th>
                                            {administreDetails.a_iris_cumule.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>NR/NGC</th>
                                            {administreDetails.a_ngc_cumule.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>RAC</th>
                                            {administreDetails.a_rac.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>RF/QSR</th>
                                            {administreDetails.a_rf_qsr.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>Apt resp / Emp</th>
                                            {administreDetails.a_aptitude_emploi_sup.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                        <tr>
                                            <th>Potentiel CAT Sup</th>
                                            {administreDetails.a_potentiel_responsabilite_sup.map((ap) => (
                                                    <td>{ap}</td>
                                                ))}
                                        </tr>
                                    </tbody>
                                </table>
                                </TabPanel>

                            </Tabs>
                        </>
                    )}
                </div>
            </>
        </Modal>
    );
});

export default FicheDetailleeAdministre;
