import React, {Component} from "react";
import {Link} from "react-router-dom";
import './Style.css'
import ScoNavBar from "./ScoNavBar";
import {getJson} from "./Request";
import {Button} from "react-bootstrap";

/** Page d'information d'un étudiant' */
class Etudiant extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // Données de l'étudiant
            etud: {},
            // Formation actuelle de l'étudiant
            formation: [],
            // Semestres correspondant a la formation de l'étudiant
            semestres: [],
            loaded: false
        };
    }

    componentWillMount() {
        this.getData()
    }

    /**
     * Recupère les données de l'étudiant depuis l'API
     */
    getData() {
        let dept = window.location.href.split('/')[7]
        let etudid = window.location.href.split('/')[10]
        let BASE_URL = window.$api_url
        getJson(BASE_URL + dept + '/Scolarite/Notes/etud_info?format=json&etudid=' + etudid)
            .then(res => {
                this.setState({ etud: res.data, formation: res.data.insemestre })
                // Recuperation des données de semestres pour la formation d'un étudiant
                res.data.insemestre.map((sem) => {
                    getJson(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json&formsemestre_id=' + sem.formsemestre_id)
                        .then(res => {
                            let joined = this.state.semestres.concat(res.data[0]);
                            this.setState({ semestres: joined, loaded: true })
                        })
                })
            })
    }

    render() {
        return(
            <div>
                <ScoNavBar/>
                <div className="wrapper">
                    <div id="wrapDept">
                        <h1>{this.state.etud.nomprenom}</h1>
                        <img
                            alt={`${this.state.etud.nomprenom}`}
                            src={`/ScoDoc/${window.location.href.split('/')[7]}/Scolarite/Notes/${this.state.etud.photo_url}`}
                            width="102"
                            height="128"
                            className="d-inline-block align-top"
                        />{' '}
                        <div id="wrapDept" className="col-sm">
                            <h3>Informations personnelles</h3>
                            {this.state.etud.telephone !== "" || this.state.etud.telephonemobile !== "" ||
                            this.state.etud.email !== "" || this.state.etud.emailperso !== "" ?
                                <div className="col-sm">
                                    <h4>Contact</h4>
                                    {this.state.etud.telephone !== "" && <><a href={'tel:' + this.state.etud.telephone}>Téléphone: {this.state.etud.telephone}</a><br/></>}
                                    {this.state.etud.telephonemobile !== "" && <><a href={'tel:' + this.state.etud.telephonemobile}>Mobile: {this.state.etud.telephonemobile}</a><br/></>}
                                    {this.state.etud.email !== "" && <><a href={'mailto:' + this.state.etud.email}>Mail étudiant: {this.state.etud.email}</a><br/></>}
                                    {this.state.etud.emailperso !== "" && <><a href={'mailto:' + this.state.etud.emailperso}>Mail personnel: {this.state.etud.emailperso}</a><br/></>}
                                </div>
                            :
                                <div className="col-sm">Aucun contact disponible</div>
                            }

                            {this.state.etud.domicile !== "" ||  this.state.etud.codepostaldomicile !== "" ||
                            this.state.etud.villedomicile !== "" ?
                                <div className="col-sm">
                                    <h4>Lieu de résidence</h4>
                                    Domicile: {this.state.etud.domicile} -
                                    {" " + this.state.etud.codepostaldomicile}  {this.state.etud.villedomicile}<br/>
                                </div>
                           :
                                <div className="col-sm">Aucune information de résidence disponible</div>
                            }
                        </div>

                        <div id="wrapDept" className="col-sm">
                            {this.state.etud.bac !== "" || this.state.etud.specialite !== "" ?
                                <div className="col-sm">
                                    <h4>Parcours</h4>
                                    Bac {this.state.etud.bac} {this.state.etud.specialite}
                                    {this.state.etud.nomlycee !== "" || this.state.etud.codepostallycee !== "" ||
                                    this.state.etud.villelycee !== "" ?
                                        <div>
                                            {" " + this.state.etud.nomlycee} ({this.state.etud.codepostallycee} {this.state.etud.villelycee})<br/>
                                        </div>
                                    : null}
                                </div>
                            : null}

                            {this.state.loaded === true &&
                                <div className="col-sm">
                                    <h4>Formation actuelle</h4>
                                    {this.state.semestres.map((sem, index) => {
                                        return (
                                            <div>
                                                <b>{sem.titreannee}</b><br/>
                                                {sem.date_debut} - {sem.date_fin}<br/>
                                                {this.state.etud.insemestre[index].groupes !== "" && this.state.etud.insemestre[index].groupes &&
                                                    "Groupes: " + this.state.etud.insemestre[index].groupes
                                                }
                                                <h5>Liens</h5>
                                                <Link to={{
                                                    pathname: `/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`,
                                                    tab: "Absences",
                                                    etudid: window.location.href.split('/')[10]
                                                }}>
                                                    <Button variant="primary" style={{"margin-right": "2px"}}>Vers Absences</Button>
                                                </Link>
                                                <Link to={{
                                                    pathname: `/${window.location.href.split('/')[7]}/Scolarite/${sem.formsemestre_id}/GestionSem`,
                                                    tab: "Bulletin",
                                                    etudid: window.location.href.split('/')[10]
                                                }}>
                                                    <Button variant="primary" style={{"margin-left": "2px"}}>Vers bulletin</Button>
                                                </Link>
                                            </div>
                                        )
                                    })}
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default Etudiant