import React, {Component} from "react";
import {Tabs, Tab} from "react-bootstrap"
import Accueil from "./GestionSemestre/Accueil";
import Absences from "./GestionSemestre/Absences";
import Etudiants from "./GestionSemestre/Etudiants";
import ScoNavBar from "./ScoNavBar";
import Bulletin from "./GestionSemestre/Bulletin";
import Select from "react-select";
import {getJson} from "./Request";

/** Page de gestion du semestre */
class GestionSemestre extends Component {
    constructor(props){
        super(props)
        this.state = {
            selectOptions: [],
            id: "",
            name: '',
            defaulttab: "Accueil",
            defaultsel: ""
        }
    }

    componentWillMount() {
        this.getData()

        if (this.props.location.tab) {
            this.setState({defaulttab: this.props.location.tab, defaultsel: this.props.location.etudid,
                id: this.props.location.etudid, name: this.state.selectOptions.find(option => option.value === this.state.id)
            })
        }
    }

    /**
     * Recupère la liste des étudiants inscrits au semestre pour le Select 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 => {
                this.setState({students: res.data})
                // Création d'une liste pour le select
                res.data.map((student) => {
                    let joined = this.state.selectOptions.concat({label: student.nom_disp + " " + student.prenom, value: student.etudid});
                    this.setState({selectOptions: joined})
                })
            })
    }

    handleSelectChange(e){
        this.setState({id:e.value, name:e.label})
    }

    render() {
        return (
            <div>
                <ScoNavBar/>
                <div className="container">
                    <div className="row justify-content-center">
                        {/* Selection de l'étudiant pour les sous-composants */}
                        <div className="col-sm" id="wrapDept">
                            Choix de l'étudiant
                            <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}
                                    value={this.state.selectOptions.find(option => option.value === this.state.defaultsel)} />
                        </div>
                    </div>
                </div>
                <div>
                    <Tabs defaultActiveKey={this.state.defaulttab} id="controlled-tab-example">
                        <Tab eventKey="Accueil" title="Accueil" >
                            <Accueil />
                        </Tab>
                        <Tab eventKey="Absences" title="Absences">
                            <Absences id={this.state.id} name={this.state.name}/>
                        </Tab>
                        <Tab eventKey="Bulletin" title="Bulletin">
                            <Bulletin id={this.state.id} name={this.state.name}/>
                        </Tab>
                        <Tab eventKey="Etud" title="Etudiants">
                            <Etudiants students={this.state.students}/>
                        </Tab>
                    </Tabs>
                </div>
            </div>
        )
    }
}

export default GestionSemestre