'use strict';

require('app/stylesheets/mapbox-gl.css');

import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import { Button } from 'react-bootstrap';
import {
  dimensions,
  generateMapImage,
  getZoomLevel,
  mapbox
} from 'app/constants';

class TripsListItem extends Component {
  render() {
    const { onDeleteTripPress, trip } = this.props;

    return (
      <div style={styles.container}>
        <Link
          activeStyle={styles.vanillaLink}
          style={styles.vanillaLink}
          to={`/trips/${trip._id}`}
        >
          <div
            style={this.loadBackgroundMapStyle()}
          ></div>
          <div style={styles.tripTitle}>
            {trip.title}
          </div>
        </Link>
      </div>
    );
  }

  loadBackgroundMapStyle() {
    const { loc: { coordinates }, viewport } = this.props.trip.destination;
    const { mapContainer } = styles;

    let imageURL = generateMapImage(...coordinates, getZoomLevel(viewport));
    return { ...mapContainer, backgroundImage: "url('" + imageURL + "')" };
  }
}

TripsListItem.propTypes = {
  onDeleteTripPress: PropTypes.func.isRequired,
  trip: PropTypes.object.isRequired
};

const styles = {
  container: {
    backgroundColor: "#ffffff",
    border: "1px solid #cccccc",
    borderRadius: 5,
    height: dimensions.tripsPage.listItem.height,
    margin: "15px 0px",
    width: dimensions.tripsPage.listItem.width
  },
  mapContainer: {
    borderTopLeftRadius: 4,
    borderTopRightRadius: 4,
    height: mapbox.staticImage.height,
    width: mapbox.staticImage.width
  },
  tripTitle: {
    color: "#333333",
    fontSize: 18,
    fontWeight: 300,
    letterSpacing: 0.5,
    padding: "25px 20px 20px",
    textAlign: "center"
  },
  vanillaLink: {
    textDecoration: "none"
  }
};

export default TripsListItem;

@@ -12,51 +12,8 @@
 ';%0A%0A
-require('app/stylesheets/mapbox-gl.css');%0A%0A
 impo
@@ -356,47 +356,8 @@
 n (%0A
-      %3Cdiv style=%7Bstyles.container%7D%3E%0A  
     
@@ -364,18 +364,16 @@
   %3CLink%0A
-  
         
@@ -409,26 +409,24 @@
 nk%7D%0A        
-  
 style=%7Bstyle
@@ -436,26 +436,24 @@
 anillaLink%7D%0A
-  
         to=%7B
@@ -480,18 +480,55 @@
 %7D%0A      
-  
+%3E%0A        %3Cdiv style=%7Bstyles.container%7D
 %3E%0A      
@@ -697,20 +697,19 @@
       %3C/
-Link
+div
 %3E%0A      
@@ -706,27 +706,28 @@
 iv%3E%0A      %3C/
-div
+Link
 %3E%0A    );%0A  %7D
@@ -1265,16 +1265,66 @@
 ius: 5,%0A
+    display: %22flex%22,%0A    flexDirection: %22column%22,%0A
     heig
@@ -1714,18 +1714,18 @@
 g: %22
-25
+30
 px 20px 
 20px
@@ -1720,18 +1720,18 @@
 px 20px 
-20
+15
 px%22,%0A   

Use flexbox layout to fit long trip titles