import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', function(){
    class CarsDbList extends React.Component {
        handleBtnClick = (id) => {
            if (typeof this.props.onDel === 'function') {
                this.props.onDel(id);
            }
        };

        render () {
            const liCss = {
                borderBottom : '1px solid black',
                width : 300,
                marginBottom : 5,
                display : 'flex',
                justifyContent : 'space-between',
                listStyle : 'dot',
            }
            const css = {
                display : 'inline-block',
                marginRight : 15,
                padding : 5,
            };
            const li = this.props.cars.map(e => {
                return <li key={e.id} style={liCss}>
                    <span style={css}>{e.brand} {e.name}</span>
                    <button style={css}
                        onClick={ev => this.handleBtnClick(e.id)}>
                        Sprzedany</button>
                </li>
            });
            return <ul>
                {li}
            </ul>;
        }
    }

    class CarsDbManager extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                data : null,
            };
        }

        handleCarSold = (id) => {
            const data = this.state.data.slice();
            const newData = data.filter((e) => e.id !== id);
            fetch(`http://localhost:3000/cars/${id}`, {
                method : 'DELETE',
            })
            .then( () => {
                this.setState({
                    data : newData,
                });
            });
        };

        componentDidMount() {
            fetch('http://localhost:3000/cars')
            .then(resp => {
                if (!resp.ok) throw new Error('^^');
                return resp.json();
            })
            .then(respJson => this.setState({
                data : respJson,
            }));
        }

        render () {
            if (!this.state.data) return null;
            return <div>
                <CarsDbList cars={this.state.data} onDel={this.handleCarSold} />
            </div>;
        }
    }

    class App extends React.Component {
        render () {
            return <CarsDbManager />;
        }
    }

    ReactDOM.render(
        <App />,
        document.getElementById('app')
    );
});