import React, {Component} from 'react';
import HotelsIndv from './HotelsIndv';
import FilterOptions from './FilterOptions';
import 'whatwg-fetch';

const API_URL = 'https://hotel-project-ajboyle.c9users.io/api/locations/';
const API_HEADERS = {
    'Content-Type': 'application/json'
};
//'https://hotel-project-ajboyle.c9users.io/api/locations/' + city + '/hotels/' + hotel.id + '?checkin=' + checkin + '&checkout=' + checkout


class HotelsList extends Component {
    constructor(){
        super();
        this.state = {
            hotel: []
        };
    }
    getHotel(){
        fetch(API_URL + this.props.info.city + '/hotels/' + this.hotel.id + '?checkin=' + this.props.info.checkin + '&checkout=' + this.props.info.checkout, {headers: API_HEADERS})
        .then((response) => response.json())
        .then((responseData) => {
            this.setState({ hotel: responseData });
        })
        .catch((error) => {
            console.log('Error fetching and parsing data', error);
        });
    }
    render(){
        var city = this.props.info.city;
        var checkin = this.props.info.checkin;
        var checkout = this.props.info.checkout;
        
        let hotelNodes = this.props.data.map((hotel) => {
            return (
                <HotelsIndv 
                    key={hotel.id} 
                    link={'#api/locations/' + city + '/hotels/' + hotel.id + '?checkin=' + checkin + '&checkout=' + checkout} 
                    photo={hotel.photos[0]['thumbnail']} 
                    name={hotel.name} rate={hotel.available ? '$' + (Number(hotel['nightly_rate']).toFixed(0)) : "Unavailable"}
                    hotelCallback={this.getHotel.bind(this)}
                />
            );
        });
        return (
            <div className="results">
            <div id='hotels'>{hotelNodes}</div>
            <Hotel hotel={this.state.hotel} />
            </div>
        );
    }   
}

export default HotelsList;
@@ -117,16 +117,45 @@
 tions';%0A
+import Hotel from './Hotel';%0A
 import '
@@ -169,16 +169,16 @@
 fetch';%0A
-
 %0Aconst A
@@ -569,16 +569,46 @@
 otel: %5B%5D
+,%0A            showHotel: false
 %0A       
@@ -921,16 +921,33 @@
 State(%7B 
+%0A                
 hotel: r
@@ -957,16 +957,62 @@
 onseData
+, %0A                showHotel: true%0A           
  %7D);%0A   
@@ -1434,17 +1434,50 @@
 otel.id%7D
- 
+%0A                    id=%7Bhotel.id%7D
 %0A       
@@ -1881,32 +1881,49 @@
  );%0A        %7D);%0A
+                %0A
         return (
@@ -1993,74 +1993,93 @@
 els'
-%3E%7BhotelNodes%7D%3C/div%3E%0A            %3CHotel hotel=%7Bthis.state.hotel%7D /%3E
+ className=%7Bthis.state.showHotel ? %22hotelsHide%22 : %22%22%7D%3E%7BhotelNodes%7D%3C/div%3E%0A            
 %0A   

remove Hotel