import React from 'react';
import { observer } from 'mobx-react';

import './InformationsFiltres.scss';
import { Spinner } from 'react-bootstrap';

/**
 * Composant permettant d'afficher le nombre d'éléments d'une liste AG Grid, le nombre d'éléments sélectionnés,
 * le nombre d'éléments filtrés et un lien d'action permettant de retirer tous les filtres.
 *
 * @component
 * @param {string} props.itemLabel - Libellé d'un élément au singulier (ex: "administré")
 * @param {string} props.itemsLabel - Libellé d'un élément au pluriel (ex: "administrés")
 * @param {number} props.nbItems - Le nombre total d'éléments dans la liste
 * @param {boolean} props.isFiltered - Indique si la liste est actuellement filtrée
 * @param {number} props.nbFiltered - Le nombre total d'éléments filtrés dans la liste
 * @param {number} props.nbSelected - Le nombre total d'éléments sélectionnés dans la liste
 * @param {number} props.nbSelectedVisible - Le nombre d'éléments sélectionnés visibles dans la liste (en cas de filtrage actif)
 *
 */
const InformationsFiltres = observer((props) => {
    const itemsLabel = props.nbItems <= 1 ? props.itemLabel : props.itemsLabel;

    const selectedText =
        props.nbSelected >= 1 ? (
            <>
                {' '}
                dont <strong>{props.nbSelected}</strong> sélectionné{props.nbSelected > 1 ? 's' : ''}
                {props.nbSelectedVisible < props.nbSelected ? (
                    <>
                        {' '}
                        <span className="avertissement">
                            (<strong>{props.nbSelectedVisible}</strong> visible{props.nbSelectedVisible > 1 ? 's' : ''} après filtrage)
                        </span>
                    </>
                ) : (
                    ''
                )}
            </>
        ) : (
            ''
        );

    return (
        <>
            <div className="InformationsFiltres ml-0" style={{ marginTop: '0.3em' }}>
                {props.isFiltered ? (
                    <>
                        <p className="m-0">
                            Affichage filtré de
                            <strong>{' ' + props.nbFiltered + ' ' + itemsLabel + ' '}</strong>
                            sur
                            <strong>{' ' + props.nbItems}</strong> au total{selectedText}.
                            <a
                                href="#"
                                className={'ml-2'}
                                onClick={(e) => {
                                    e.preventDefault();
                                    props.gridApi.setFilterModel(null);
                                    props.gridApi.onFilterChanged();
                                    props.setIsFiltered(false);
                                    props.setIsFilterReset(true);
                                }}
                            >
                                Retirer tous les filtres
                            </a>
                        </p>
                    </>
                ) : (
                    <p className="m-0">
                        Affichage de <strong>{' ' + props.nbItems + ' ' + itemsLabel}</strong>
                        {selectedText}, vue non filtrée.
                    </p>
                )}
            </div>
            {props.isLoadingData && (
                <div>
                    <Spinner className={'ml-2'} animation="border" variant="secondary" size="sm" />
                    <span className="ml-1">
                        <strong>Chargement des données en cours...</strong>
                    </span>
                </div>
            )}
        </>
    );
});

export default InformationsFiltres;
