import React, { Component } from 'react';
import { Button, ButtonGroup, Container, Table } from 'reactstrap';
import AppNavbar from './AppNavbar';
import { Link } from 'react-router-dom';

class InvoiceList extends Component {

    constructor(props) {
        super(props);
        this.state = {invoices: []};
        this.remove = this.remove.bind(this);
    }

    componentDidMount() {
        fetch('/invoices')
            .then(response => response.json())
            .then(data => this.setState({invoices: data}));
    }

    async remove(id) {
        await fetch(`/invoices/${id}`, {
            method: 'DELETE',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        }).then(() => {
            let updatedClients = [...this.state.invoices].filter(i => i.id !== id);
            this.setState({invoices: updatedClients});
        });
    }

    render() {
        const {invoices} = this.state;

        const clientList = invoices.map(invoice => {
            return <tr key={invoice.id}>
                <td style={{whiteSpace: 'nowrap'}}>{invoice.invoiceTitle}</td>
                <td>{invoice.id}</td>
                <td>
                    <ButtonGroup>
                        <Button size="sm" color="primary" tag={Link} to={"/invoices/" + invoice.id}>Edit</Button>
                        <Button size="sm" color="danger" onClick={() => this.remove(invoice.id)}>Delete</Button>
                    </ButtonGroup>
                </td>
            </tr>
        });

        return (
            <div>
                <AppNavbar/>
                <Container fluid>
                    <div className="float-right">
                        <Button color="success" tag={Link} to="/invoices/new">Add Invoice</Button>
                    </div>
                    <h3>Clients</h3>
                    <Table className="mt-4">
                        <thead>
                        <tr>
                            <th width="30%">Id</th>
                            <th width="30%">Invoice Title</th>
                            <th width="40%">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {clientList}
                        </tbody>
                    </Table>
                </Container>
            </div>
        );
    }
}

export default InvoiceList;