import React, {Component} from "react";
import '../Style.css'
import Select from 'react-select'

class Absences extends Component {
    constructor(props){
        super(props)
        this.state = {
            selectOptions: [],
            id: "",
            name: '',
            abs: []
        }
    }

    componentWillMount() {
        let dept = window.location.href.split('/')[6]
        let sem = window.location.href.split('/')[8]
        let BASE_URL = window.$api_url
        fetch(BASE_URL + dept +
            '/Scolarite/Notes/groups_view?with_codes=1&format=json&formsemestre_id=' + sem, {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then(response =>
                response.json().then(data => ({
                        data: data,
                    })
                ).then(res => {
                    res.data.map((student, index) => {
                        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}, () => {this.getData()})
    }

    getData() {
        let dept = window.location.href.split('/')[6]
        let BASE_URL = window.$api_url
        if (this.state.id !== "") {
            fetch(BASE_URL + dept + "/Scolarite/Absences/ListeAbsEtud?format=json&etudid=" + this.state.id, {
                method: 'GET',
                verify: false,
                credentials: 'include',
            })
                .then(response =>
                    response.json().then(data => ({
                            data: data,
                        })
                    ).then(res => {
                        this.setState({abs: res.data})
                    })
                );
        }
    }

    render() {
        return (
            <div className="wrapper">
                <h1 id="pageTitle">Gestion des absences</h1>
                <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
                <div className="col-sm" id="wrapDept">
                    {this.state.name !== "" && <h4>Absences de {this.state.name}</h4>}
                    {(this.state.abs.length === 0 && this.state.name !== "") &&
                        <h6>Aucune absence de l'élève</h6>
                    }
                    {this.state.abs.map((abs, index) => {
                        return (
                            <div className="col-sm" id="wrapDept">
                                <h6>{abs.datedmy} | {abs.matin}</h6>
                                {abs.motif !== "" &&
                                    <span>Motif: {abs.motif }</span>
                                } {abs.exams !== "" &&
                                    <span>Exam a rattraper: {abs.exams}</span>
                                }
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

export default Absences