import React, {Component} from "react";
import {Link} from "react-router-dom";
import {Row, Col} from "react-bootstrap"
import {getJson} from "./Request";

/** Module de recherche d'étudiant */
class SearchStudent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            students: [],
            // Status possibles:
            // 0: Vide - 1: Pas de resultat - 2: Un ou plusieurs resultats
            search_status: 0,
        };
        this.handleChangeSearch = this.handleChangeSearch.bind(this)
        this.searchStudent = this.searchStudent.bind(this);
    }


    handleChangeSearch(e) {
        this.setState({ search: e.target.value });
    }

    /**
     * Lance une recherche de l'étudiant depuis l'API
     * @param search {String} - Texte recherché
     */
    searchStudent(search) {
        let dept = window.location.href.split('/')[7]
        let BASE_URL = window.$api_url
        getJson(BASE_URL + dept + '/Scolarite/Notes/search_etud_by_name?term=' + search +'&format=json')
            .then(res => {
                this.setState({ students: res.data });
                if (this.state.students.length === 0) {
                    this.setState({search_status: 1, toast: true});
                } else {
                    this.setState({search_status: 2, toast: false});
                }
            })
        this.setState({searched: true})
    }

    /**
     * Presentation du résultat
     * @returns {JSX.Element} - Resultat au format JSX
     */
    result() {
        if (this.state.toast === true) {
            return (
                <div id="wrapDept">
                    Aucun étudiant trouvé
                </div>
            )
        } else if (this.state.search_status === 2) {
            return (
                <Col>
                    {this.state.students.map((student) => {
                        return (
                            <Row id="wrapDept">
                                <Link to={`/${window.location.href.split('/')[7]}/Scolarite/Etudiant/${student.value}`}>
                                    <span>{student.label}</span>
                                </Link>
                            </Row>
                        )
                    })}
                </Col>
            )
        }
    }

    render() {
        return (
            <div className="wrapper">
                <div className="input-group">
                    <input type="text" id="search" className="form-control" onChange={this.handleChangeSearch}/>
                    <div className="input-group-append">
                        <button type="button" className="btn waves-effect waves-light btn-primary" onClick={() => {this.searchStudent(this.state.search)}}>
                            Rechercher
                        </button>
                    </div>
                </div>
                {this.result()}
            </div>
        )
    }
}

export default SearchStudent