import React, {Component} from "react";
import {LazyLoadImage} from 'react-lazy-load-image-component';
import '../Style.css'
import {Link} from "react-router-dom";
import {getJson} from "../Request";
import {Spinner} from "react-bootstrap";

/** Page de présentation des étudiants inscrits au semestre */
class Etudiants extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // Liste des étudiants inscrits au semestre
            students: [],
        };
    }

    componentWillMount() {
        // this.getData()
    }

    componentDidUpdate(prevProps) {
        if (prevProps !== this.props) {
            if (this.props.students.length) {
                const dat = this.props.students.map((x,i) => {
                    return i % 2 === 0 ? this.props.students.slice(i, i+2) : null;
                }).filter(x => x != null);
                this.setState({ students: dat});
            }
        }
    }

    /**
     * Recupère la liste des étudiants inscrits au semestre depuis l'API
     */
    getData() {
        let dept = window.location.href.split('/')[7]
        let sem = window.location.href.split('/')[9]
        let BASE_URL = window.$api_url
        getJson(BASE_URL + dept + '/Scolarite/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem)
            .then(res => {
                // Gestion des données sous forme de tableau a deux colonnes
                const dat = res.data.map((x,i) => {
                    return i % 2 === 0 ? res.data.slice(i, i+2) : null;
                }).filter(x => x != null);
                this.setState({ students: dat});
            })
    }

    render() {
        return (
            <div className="wrapper">
                <h1 id="pageTitle">Liste des étudiants</h1>
                <div className="container">
                    {this.state.students.length !== 0 ?
                        this.state.students.map((students) => {
                            // Creation du tableau de deux colonnes
                            return (
                                <div className="row justify-content-center">
                                {students.map((etud, index) => {
                                    return (
                                        <div className="col" key={index} id="wrapDept">
                                            <Link to={`/${window.location.href.split('/')[7]}/Scolarite/Etudiant/${etud.etudid}`}>
                                                {/* Recuperation de la photo de l'etudiant */}
                                                    <LazyLoadImage
                                                    alt={`${etud.nom_disp} ${etud.prenom}`}
                                                    src={`/ScoDoc/${window.location.href.split('/')[7]}/Scolarite/Notes/get_photo_image?etudid=${etud.etudid}`}
                                                    width="102"
                                                    height="128"
                                                    className="d-inline-block align-top"
                                                    />{' '}<br/>
                                                    {etud.nom_disp} {etud.prenom}
                                            </Link>
                                        </div>
                                    )
                                })}
                            </div>
                            )
                        })
                    :
                        <div className="row justify-content-center">
                            <Spinner animation="border"/>
                        </div>
                    }
                </div>
            </div>
        )
    }
}

export default Etudiants