import React, { Component } from 'react'
import OpleidingService from '../services/OpleidingService'

class ListOpleidingComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
                opleidingen: []
        }
        this.addOpleiding = this.addOpleiding.bind(this);
        this.editOpleiding = this.editOpleiding.bind(this);
        this.deleteOpleiding = this.deleteOpleiding.bind(this);
    }

    deleteOpleiding(id){
        OpleidingService.deleteOpleiding(id).then( res => {
            this.setState({opleidingen: this.state.opleidingen.filter(opleiding => opleiding.id !== id)});
        });
    }
    viewOpleiding(id){
        this.props.history.push(`/view-opleiding/${id}`);
    }
    editOpleiding(id){
        this.props.history.push(`/add-opleiding/${id}`);
    }

    componentDidMount(){
        OpleidingService.getOpleidingen().then((res) => {
            this.setState({ opleidingen: res.data});
        });
    }

    addOpleiding(){
        this.props.history.push('/add-opleiding/_add');
    }

    render() {
        return (
            <div>
                 <h2 className="text-center">Opleidingen Lijst</h2>
                 <div className = "row">
                    <button className="btn btn-primary" onClick={this.addOpleiding}>Opleiding toevoegen</button>
                 </div>
                 <br></br>
                 <div className = "row">
                        <table className = "table table-striped table-bordered">

                            <thead>
                                <tr>
                                    <th> Naam</th>
                                    <th> Omschrijving</th>
                                    <th> Prijs</th>
                                    <th> Opties</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.opleidingen.map(
                                        opleiding =>
                                        <tr key = {opleiding.id}>
                                             <td> { opleiding.naam} </td>
                                             <td> {opleiding.omschrijving}</td>
                                             <td> {opleiding.prijs}</td>
                                             <td>
                                                 <button onClick={ () => this.editOpleiding(opleiding.id)} className="btn btn-info">Wijzigen</button>
                                                 <button style={{marginLeft: "10px"}} onClick={ () => this.deleteOpleiding(opleiding.id)} className="btn btn-danger">Verwijderen</button>
                                                 <button style={{marginLeft: "10px"}} onClick={ () => this.viewOpleiding(opleiding.id)} className="btn btn-info">Weergeven</button>
                                             </td>
                                        </tr>
                                    )
                                }
                            </tbody>
                        </table>


                 </div>

            </div>
        )

    }
}

export default ListOpleidingComponent