import React, {Component} from "react";
import {Link, Redirect} from "react-router-dom";
import {Row, Col} from "react-bootstrap"

class SearchStudent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            students: [],
            // Status possibles:
            // 0: Vide - 1: Pas de resultat - 2: 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 });
    }

    searchStudent() {
        let dept = window.location.href.split('/')[6]
        let BASE_URL = window.$api_url
        fetch(BASE_URL + dept +
            '/Scolarite/Notes/search_etud_by_name?term=' + this.state.search +'&format=json', {
            method: "GET",
            credentials: "include",
        })
            .then(response =>
                response.json().then(data => ({data: data,})
                ).then(res => {
                    this.setState({ students: res.data });
                    console.log(this.state.students)
                }))
            .then(res => {
                if (this.state.students.length === 0) {
                    this.setState({search_status: 1, toast: true});
                } else if (this.state.students.length === 1) {
                    return <Redirect to="/" />
                } else {
                    this.setState({search_status: 2, toast: false});
                }
            })
        this.setState({searched: true})
    }

    result() {
        if (this.state.toast === true) {
            return (
                <div id="wrapDept">
                    Aucun élève trouvé
                </div>
            )
        } else if (this.state.search_status === 2) {
            return (
                <Col>
                    {this.state.students.map((student, index) => {
                        return (
                            <Row id="wrapDept">
                                <Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/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()}}>
                            Rechercher
                        </button>
                    </div>
                </div>
                {this.result()}
            </div>
        )
    }
}

export default SearchStudent