import React from 'react';
import SwapiService from '../../services/swapi-service';
import './people.css';

import ItemList from '../item-list';
import ItemDetails from '../item-details';
import Error from '../error';



export default class People extends React.Component {

    state = {
        selectedItem: null,
        hasError: false
    }

    swapiService = new SwapiService();

    onItemSelected = (id) => {
        this.setState({
            selectedItem: id
        })
    }

    componentDidCatch() {
        this.setState({hasError: true});
    }


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

        if (hasError) {
            return <Error />;
        }

        return (
            <div>
                <div className="row ">
                    <div className="items col-md-6">
                        <ItemList
                        onItemSelected={this.onItemSelected}
                        getData={this.swapiService.getAllPeople}
                        renderItem={(item) => item.name}/>
                    </div>


                    <div className="details col-md-6">
                        <ItemDetails itemId={this.state.selectedItem}/>
                    </div>

                </div>

                <div className="row ">
                    <div className="items col-md-6">
                        <ItemList
                        onItemSelected={this.onItemSelected}
                        getData={this.swapiService.getAllPlanets}/>
                    </div>


                    <div className="details col-md-6">
                        <ItemDetails itemId={this.state.selectedItem}/>
                    </div>

                </div>

            </div>

        )
    }
}