import React, {Component} from "react";
import {Link} from "react-router-dom";
import './Style.css'
import ScoNavBar from "./ScoNavBar";
import SearchStudent from './SearchStudent'
import {Accordion, Card, Button} from 'react-bootstrap'

class Scolarite extends Component {
    constructor(props) {
        super(props);
        this.state = {
            semestres: [],
            students: [],
            toast: false
        };
        this.dismissToast = this.dismissToast.bind(this);
        this.getData = this.getData.bind(this);
    }

    componentWillMount() {
        let dept = window.location.href.split('/')[6]
        let BASE_URL = window.$api_url
        fetch(BASE_URL + dept + '/Scolarite/Notes/formsemestre_list?format=json', {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then(response =>
                response.json().then(data => ({
                        data: data,
                        status: response.status
                    })
                ).then(res => {
                    this.setState({ semestres: res.data });
                }));
    }

    getData () {
        return this.state.semestres
    }

    dismissToast() {
        this.setState({toast: false})
    }

    render() {
        return (
            <div>
                <ScoNavBar/>
                <section>
                    <h1 id="pageTitle">Scolarité</h1>
                </section>

                <Accordion defaultActiveKey="0">
                    <Card>
                        <Card.Header>
                            <Accordion.Toggle as={Button} variant="link" eventKey="0">
                                Semestres en cours
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                            <Card.Body>
                                <div className="container">
                                    <div className="row">
                                        {this.state.semestres.map((sem, index) => {
                                            if(sem.etat === "1")
                                            return (
                                                <div className="col-sm" key={index} id="wrapDept">
                                                    <Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/Scolarite/${sem.formsemestre_id}/GestionSem`}>
                                                    <h4>{sem.titre} [{sem.modalite}]</h4>
                                                    <p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
                                                    </Link>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                            <Accordion.Toggle as={Button} variant="link" eventKey="0">
                                Semestres passés
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="1">
                            <Card.Body>
                                {this.state.semestres.map((sem, index) => {
                                    if(sem.etat !== "1")
                                        return (
                                            <div className="col-12" key={index} id="wrapDept">
                                                <Link to={`/ScoDoc/static/mobile/${window.location.href.split('/')[6]}/Scolarite/${sem.formsemestre_id}/GestionSem`}>
                                                    <h3>{sem.titre} [{sem.modalite}]</h3>
                                                    <p>Semestre {sem.semestre_id} - Année {sem.anneescolaire} [{sem.date_debut} - {sem.date_fin}]</p>
                                                </Link>
                                            </div>
                                        )
                                })}
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                    <Card>
                        <Card.Header>
                            <Accordion.Toggle as={Button} variant="link" eventKey="2">
                                Recherche étudiant
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="2">
                            <Card.Body>
                                <SearchStudent />
                            </Card.Body>
                        </Accordion.Collapse>
                    </Card>
                </Accordion>
            </div>
        );
    }
}

export default Scolarite;