import React, { Component } from 'react';
import ReactMap from 'google-map-react';
import bus from '../bus.png';

const Bus = props =>
  <div onClick={props.filter} id={props.id}>
    <div id={props.id} style={{ color: 'blue', fontSize: '9px' }}>
      {props.vehicle}
    </div>
    <div id={props.id}>
      <img src={bus} style={{ width: '70px' }} alt="" />
    </div>
  </div>;

class MapRoutes extends Component {
  render() {
    const { route, buses, filter } = this.props;
    const processedBuses = route
      ? buses.filter(bus => bus.entity[0].vehicle.trip.route_id === route)
      : buses;

    return (
      <ReactMap
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        bootstrapURLKeys={{
          key: 'AIzaSyAfkODUVUwP3lCF1Ui3EZrhrvI5DYCWnas'
        }}
      >
        {processedBuses.map(bus =>
          <Bus
            lat={bus.entity[0].vehicle.position.latitude}
            lng={bus.entity[0].vehicle.position.longitude}
            key={bus.entity[0].vehicle.vehicle.id}
            vehicle={bus.entity[0].vehicle.vehicle.id}
            filter={filter}
            id={bus.entity[0].vehicle.trip.route_id}
          />
        )}
      </ReactMap>
    );
  }
}

MapRoutes.defaultProps = {
  center: { lat: 33.726116, lng: -117.775706 },
  zoom: 10
};

export default MapRoutes;