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

class Bulletin extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectOptions: [],
            id: "",
            name: '',
            bltn: {},
            datue: {},
            loaded: false
        };
        this.getData = this.getData.bind(this);
        this.getJsonData = this.getJsonData.bind(this);
    }

    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})
                    })
                })
            );
    }

    getJsonData () {
        this.setState({bltn: require('..\\..\\json\\bltn.json')}, () => {
            let ls = {}
            for (let elm in this.state.bltn.decision_ue) {
                elm = this.state.bltn.decision_ue[elm]
                ls[elm.acronyme] = elm.titre
            }
            this.setState({datue: ls}, () => {
                this.setState({loaded: true})
            })
        })

    }

    getData() {
        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/formsemestre_bulletinetud?formsemestre_id=' +
            sem +'&etudid=' + this.state.id +'&format=json', {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then(response =>
                response.json().then(data => ({
                        data: data,
                        status: response.status
                    })
                ).then(res => {
                    this.setState({ bltn: res.data }, () => {
                        let ls = {}
                        for (let elm in this.state.bltn.decision_ue) {
                            elm = this.state.bltn.decision_ue[elm]
                            ls[elm.acronyme] = elm.titre
                        }
                        this.setState({datue: ls}, () => {
                            this.setState({loaded: true})
                        })
                    })
                })
            );
    }

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

    render() {
        return (
            <div className="wrapper">
                <h1 id="pageTitle">Bulletins de notes</h1>
                <Select className="mySelect" options={this.state.selectOptions} onChange={this.handleSelectChange.bind(this)}/>
                {this.state.loaded === true &&
                <div>
                    <h2>Bulletin de {this.state.name}</h2>
                    <Table responsive="sm">
                        <thead>
                            <tr>
                                <th colSpan="3"/>
                                <th>Rang</th>
                                <th colSpan="2">Promotion</th>
                                <th>Note/20</th>
                                <th>Coef.</th>
                            </tr>
                            <tr className="smallRow">
                                <th colSpan="4"/>
                                <th>Mini</th>
                                <th>Maxi</th>
                                <th colSpan="2"/>
                            </tr>
                            <tr className="bigRow">
                                <th colSpan="3">Moyenne générale</th>
                                <th>{this.state.bltn.rang.value}/{this.state.bltn.rang.ninscrits}</th>
                                <th>{this.state.bltn.note.min}</th>
                                <th>{this.state.bltn.note.max}</th>
                                <th>{this.state.bltn.note.value}</th>
                                <th/>
                            </tr>
                        </thead>
                        {this.state.bltn.ue.map((ue, index) => {
                            return (
                                <tbody>
                                    <tr className="ueRow">
                                        <td colSpan="3">{ue.acronyme} - {this.state.datue[ue.acronyme]}</td>
                                        <td>{ue.rang}/{this.state.bltn.rang.ninscrits}</td>
                                        <td>{ue.note.min}</td>
                                        <td>{ue.note.max}</td>
                                        <td>{ue.note.value}</td>
                                        <td>{/*Coef*/}</td>
                                    </tr>
                                    {ue.module.map((mod, index) => {
                                        return (
                                            <tr>
                                                <td colSpan="3">{mod.titre.replace("&apos;", "'")}</td>
                                                <td>{mod.rang.value}/{this.state.bltn.rang.ninscrits}</td>
                                                <td>{mod.note.min}</td>
                                                <td>{mod.note.max}</td>
                                                <td>{mod.note.value}</td>
                                                <td>{mod.coefficient}</td>
                                            </tr>
                                        )
                                    })}
                                </tbody>
                            )
                        })}
                    </Table>
                </div>
                }
            </div>
        )
    }
}

export default Bulletin