import React, {Component} from "react";
import {Link} from "react-router-dom";
import './Style.css'

class ChoixDept extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // Liste des départements disponibles pour l'utilisateur
            depts: [],
        };
    }

    componentWillMount() {
        let BASE_URL = window.$api_url
        fetch(BASE_URL + 'list_depts?format=json', {
            method: 'GET',
            verify: false,
            credentials: 'include',
        })
            .then(response =>
                // Traitement des données JSON
                response.json().then(data => ({
                        data: data,
                        status: response.status
                    })
                ).then(res => {
                    this.setState({ depts: res.data })
                }));
    }

    render() {
        return (
            <div className="wrapper">
                <h1 id="pageTitle">Choix du département</h1>
                <div className="container">
                    <div className="row">
                        {this.state.depts.map((dept, index) => {
                            return (
                                <div className="col-sm" key={index} id="wrapDept">
                                    <Link to={`/ScoDoc/static/mobile/${dept}/Scolarite`}>
                                        Département {dept}
                                    </Link>
                                </div>
                            )
                        },)}
                    </div>
                </div>
            </div>
        );
    }
}

export default ChoixDept