import React, { Component } from 'react';
import QueueAnim from 'rc-queue-anim';
import TextField from 'material-ui/TextField';
import GMaps from './GMaps'
import RaisedButton from 'material-ui/RaisedButton';
import Divider from 'material-ui/Divider';
import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { orange500, blue500 } from 'material-ui/styles/colors';
import areIntlLocalesSupported from 'intl-locales-supported';
import moment from "moment";
import Avatar from 'material-ui/Avatar';
import Notification from '../../../components/Shared/Notification'
// import Popover from 'material-ui/Popover';
import FlatButton from 'material-ui/FlatButton';
import Dialog from 'material-ui/Dialog';
import Imgix from 'react-imgix'
import Paper from 'material-ui/Paper';
import RoadTripLink from '../../app/components/RoadtripLink';
import ContactList from '../../app/components/ContactList';

import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import MoreHorizIcon from 'material-ui/svg-icons/navigation/more-horiz';

import { grey400, darkBlack, lightBlack } from 'material-ui/styles/colors';
import MenuItem from 'material-ui/MenuItem';

import Instance from '../../../components/Connection';
// const ride = n.content.payload;
// const driverPhoneNumber = (ride.driver && ride.driver.phone_number) ? ride.driver.phone_number : '';

// const rideContactList = {
//   driverMobile: driverPhoneNumber,
//   memberMobile: ride.user.phonenumber,
//   memberEmail: ride.user.email,
//   schedulerEmail: ride.created_user.email,
//   schedulerMobile: ride.created_user.phonenumber,
//   rideID: ride.ride_uuid,
// };


// import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';

let DateTimeFormat;

// /**
//  * Use the native Intl.DateTimeFormat if available, or a polyfill if not.
//  */
if (areIntlLocalesSupported(['fr', 'fa-IR'])) {
  DateTimeFormat = global.Intl.DateTimeFormat;
}

const FloatingActionButtonExampleSimple = () => (
  <div>
    <FloatingActionButton secondary={true} style={style}>
      <ContentAdd />
    </FloatingActionButton>
  </div>
);

const styles = {
  errorStyle: {
    color: orange500,
  },
  underlineStyle: {
    borderColor: orange500,
  },
  floatingLabelStyle: {
    color: blue500,
  },
  floatingLabelFocusStyle: {
    color: blue500,
  },
};

const style = {
  margin: 12,
};

const buttonStyle = {
  marginTop: 10,
};

const getConfirmationData = () => {
  let confirmationData = {
    rideTypeValue: 0,
    providerID: 0,
    providerName: '',
    visitDate: null,
    visitTime: null,
    pickupLocation: null,
    pickupTime: null,
    user: null
  };

  const confirmationStorage = localStorage.getItem("confirmation");
  if (confirmationStorage !== undefined && confirmationStorage !== null && confirmationStorage !== '') {
    confirmationData = Object.assign(confirmationData, JSON.parse(confirmationStorage));
  }

  let user = localStorage.getItem("userData")
  if (user && user !== null && user !== '') {
    user = JSON.parse(user);
    confirmationData = Object.assign(confirmationData, { user: user });
  }

  return confirmationData;
};

class Services extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;

    this.state = {
      stepIndex: 0,
      rideTypeValue: 0,
      providerID: 0,
      providerName: '',
      visitDate: null,
      visitTime: null,
      pickupLocation: null,
      pickupTime: null,
      origin: {},
      destination: {},
      user: {
        first: "",
        last: "",
        member: "",
        phonenumber: ""
      },
      eta: {
        distance_miles: 0,
        duration_seconds: 0,
        formatted_time: ""
      },
      ride: {
        "ride_uuid": "",
        "user": {
          "useruuid": "",
          "name": "",
          "member": ""
        },
        "trip_type": {
          key: "",
          value: ""
        },
        "status": {
          "key": "",
          "value": ""
        },
        "type": {
          "key": "",
          "value": ""
        },
        "notes": "",
        "passenger": {
          "user_id": "",
          "image_url": "",
          "first_name": "",
          "last_name": "",
          "phone_number": ""
        },
        "driver": {
          "rating": "",
          "image_url": "/assets/images/g1.jpg",
          "first_name": "",
          "phone_number": ""
        },
        "vehicle": {
          "color": "",
          "make": "",
          "license_plate": "",
          "image_url": "",
          "year": 0,
          "license_plate_state": "",
          "model": ""
        },
        "route": {
          "origin": {
            "name": "",
            "lat": 0,
            "lng": 0,
            "address": ""
          },
          "destination": {
            "name": "",
            "lat": 0,
            "lng": 0,
            "address": ""
          },
          "location": {
            "lat": 0,
            "lng": 0,
            "bearing": 0
          },
          "route_kml": "",
          "distance": 0,
          "duration": 0,
          "eta": 0,
          "eta_formatted": '',
        },
        "visit": {
          "trip_type": {
            key: "",
            value: ""
          },
          "visit_uuid": "",
          "visit_external_id": "",
          "pickup": {
            "id": "",
            "name": ""
          },
          "destination": {
            "id": "",
            "name": ""
          },
          "created_user": {
            "useruuid": "",
            "name": ""
          }
        },
        "visit_date": new Date(),
        "visit_time": new Date(),
        "pickup_time": new Date()
      },
      rideInfo: {
        "ride_uuid": "",
        "user": {
          "useruuid": "",
          "name": "",
          "member": ""
        },
        "status": {
          "key": "",
          "value": ""
        },
        "type": {
          "key": "",
          "value": ""
        },
        "route_kml": "",
        "notes": "",
        "passenger": {
          "user_id": "",
          "image_url": "/assets/images/g1.jpg",
          "first_name": "",
          "last_name": "",
          "phone_number": ""
        },
        "driver": {
          "rating": "",
          "image_url": "",
          "first_name": "",
          "phone_number": ""
        },
        "vehicle": {
          "color": "",
          "make": "",
          "license_plate": "",
          "image_url": "",
          "year": 0,
          "license_plate_state": "",
          "model": ""
        },
        "route": {
          "origin": {
            "name": "",
            "lat": 0,
            "lng": 0,
            "address": ""
          },
          "destination": {
            "name": "",
            "lat": 0,
            "lng": 0,
            "address": ""
          }
        }
      },
      dialogTitleMessage: '',
      dialogOpen: false,
      dialogMessage: '',
      dialogType: 'YesNo',
    }

    this.handleCancel = this.handleCancel.bind(this);
    this.handleClose = this.handleClose.bind(this);
    this.handleYes = this.handleYes.bind(this);
    this.handleReady = this.handleReady.bind(this);
    this.handleRideChange = this.handleRideChange.bind(this);
  }

  static propTypes = {
    data: React.PropTypes.object.isRequired,
    params: React.PropTypes.object.isRequired,
    onRideUpdate: React.PropTypes.func.isRequired,
  }

  componentWillReceiveProps(nextProps) {
    let params = nextProps.params;
    params.visit_date = new Date(params.visit_date);
    params.visit_time = new Date(params.visit_time);
    params.pickup_time = new Date(params.pickup_time);

    if (params.visit.destination) {
      if (!params.visit.destination.id) params.visit.destination.id = "";
    }

    if (params.visit.pickup) {
      if (!params.visit.pickup.id) params.visit.pickup.id = "";
    }

    if (!params.route.eta) params.route.eta = 0;

    var minutes = Math.floor(params.route.eta / 60);
    var seconds = params.route.eta % 60;
    var formattedTime = `${minutes} minutes`
    if (minutes > 10) {
      var t = new Date();
      t.setSeconds(t.getSeconds() + params.route.eta);
      formattedTime = moment(t).format("hh:mm a");
    }

    params.route.eta_formatted = formattedTime;
    if (!params.trip_type) {
      params.trip_type = {
        key: "",
        value: "",
      }
    }

    if (!params.visit.trip_type) {
      params.visit.trip_type = {
        key: "",
        value: "",
      }
    }

    this.setState(Object.assign(this.state, { ride: params }));
  }

  componentDidMount() {
    let data = this.props.params;
    data.visitDate = new Date(data.visitDate);
    data.visitTime = new Date(data.visitTime);
    data.pickupTime = new Date(data.pickupTime);

    this.setState(Object.assign(this.state, data));

    let params = this.props.params;
    params.visit_date = new Date(params.visit_date);
    params.visit_time = new Date(params.visit_time);
    params.pickup_time = new Date(params.pickup_time);

    if (params.visit.destination) {
      if (!params.visit.destination.id) params.visit.destination.id = "";
    }

    if (params.visit.pickup) {
      if (!params.visit.pickup.id) params.visit.pickup.id = "";
    }

    if (!params.route.eta) params.route.eta = 0;

    var minutes = Math.floor(params.route.eta / 60);
    var seconds = params.route.eta % 60;
    var formattedTime = `${minutes} minutes`
    if (minutes > 10) {
      var t = new Date();
      t.setSeconds(t.getSeconds() + params.route.eta);
      formattedTime = moment(t).format("hh:mm a");
    }

    params.route.eta_formatted = formattedTime;
    if (!params.trip_type) {
      params.trip_type = {
        key: "",
        value: "",
      }
    }

    if (!params.visit.trip_type) {
      params.visit.trip_type = {
        key: "",
        value: "",
      }
    }

    this.setState(Object.assign(this.state, { ride: params }));
  }

  handleReady(e) {
    let self = this;
    Instance.setToken(null).post(`/v1/ext/${self.state.ride.ride_uuid}/${self.state.ride.user.useruuid}/ready`).then((res) => {
      if (self.props.onRideUpdate) {
        self.props.onRideUpdate(res.data);
      }
      self.setState(Object.assign(self.state, { dialogMessage: `You ride has been requested`, dialogTitleMessage: 'Return Ride', dialogOpen: true, dialogType: 'OK' }));
    }).catch(console.error);
  }

  handleClose(e) {
    let self = this;
    self.setState(Object.assign(self.state, { dialogMessage: `Do you want to cancel the this ride?`, dialogTitleMessage: 'Cancel Ride', dialogOpen: false }));
  }

  handleCancel(e) {
    let self = this;
    self.setState(Object.assign(self.state, {
      dialogMessage: `Do you want to cancel the this ride?`, dialogTitleMessage: 'Cancel Ride', dialogOpen: true, dialogType: 'YesNo'
    }));
  }

  handleYes(e) {
    let self = this;
    self.setState(Object.assign(self.state, { dialogMessage: `Do you want to cancel the this ride?`, dialogTitleMessage: 'Cancel Ride', dialogOpen: false }));
    Instance.setToken(null).put(`/v1/ext/${self.state.ride.ride_uuid}/${self.state.ride.user.useruuid}/cancel`).then((res) => {
      self.setState(Object.assign(self.state, { dialogMessage: `You ride has been canceled`, dialogTitleMessage: 'Canceled Ride', dialogOpen: true, dialogType: 'OK' }));
    }).catch(console.error);
  }

  handleRideChange(r) {
    if (this.props.onRideUpdate) {
      this.props.onRideUpdate(r);
    }
  }

  render() {
    const rightStyle = {
      width: '80px',
      margin: '0 5px 0 10px'
    }

    const imageStyle = { width: "64px", height: "40px" }
    const carImageStyle = { width: "70px", height: "32px" }
    const driverImageStyle = { height: "22px" }
    let data = this.state.ride.route;



    // const rideContactList = {
    //   driverMobile: driverPhoneNumber,
    //   memberMobile: ride.user.phonenumber,
    //   memberEmail: ride.user.email,
    //   schedulerEmail: ride.created_user.email,
    //   schedulerMobile: ride.created_user.phonenumber,
    //   rideID: ride.ride_uuid,
    // };


    const rideContactList = {
      driverMobile: this.state.ride.driver.phone_number,
      memberMobile: this.state.ride.driver.phone_number,

      // memberMobile:  this.state.ride.passenger.phone_number,

      memberEmail: this.state.ride.user.memberEmail,
      // schedulerEmail:  this.state.ride.user.created_user.schedulerEmail,
      schedulerEmail: "this.state.ride.user.created_user.schedulerEmail",
      // this.state.schedulerEmail,
      // this.state.schedulerEmail,
      schedulerMobile: "this.state.schedulerEmail",
      rideID: "w232323232323",
    };

    const iconButtonElement = (
      <IconButton
        touch={true}
        tooltip="Actions"
        tooltipPosition="bottom-left"
      >
        <MoreHorizIcon color={grey400} />
      </IconButton>
    );

    let actionsMenu = [];
    if (this.state.ride.visit.rides) {
      this.state.ride.visit.rides.forEach(r => {
        if (r.ride_uuid !== this.state.ride.ride_uuid) {
          let menuItem = (
            <MenuItem onTouchTap={(e) => {
              e.preventDefault();
              this.handleRideChange(r);
              return false;
            }} >
              <a href={location.href}> {r.trip_type.value.replace(' / Will Call', '')} </a>
            </MenuItem>
          )
          actionsMenu.push(menuItem);
        }
      }, this);
    }

    const rightIconMenu = (
      <IconMenu iconButtonElement={iconButtonElement}>
        {actionsMenu}
        <MenuItem>
          <a href={location.href}>Share</a>
        </MenuItem>
        <MenuItem>
          <ContactList data={rideContactList} />
        </MenuItem>
      </IconMenu>
    );

    let actions = []

    if (this.state.dialogType == 'YesNo') {
      actions = [
        <FlatButton
          label="Yes"
          primary={true}
          onClick={this.handleYes}
        />,
        <FlatButton
          label="No"
          secondary={true}
          onClick={this.handleClose}
        />,
      ];
    } else {
      actions = [
        <FlatButton
          label="OK"
          secondary={true}
          onClick={this.handleClose}
        />,
      ];
    }

    let actionButtons = [];
    if (this.state.ride.status.key !== 'canceled' && this.state.ride.status.key !== 'droppedOff') {
      actionButtons = [
        <RaisedButton
          label="I am Ready"
          primary={true}
          onTouchTap={this.handleReady}
          disabled={true}
        />,
        <RaisedButton
          label="Cancel"
          style={{ margintop: '0px' }}
          primary={false}
          onTouchTap={this.handleCancel}
        />
      ]
    }
    let pickupTime = moment(this.state.ride.pickup_time).format('MM/DD/YYYY h:mm a')
    let visitTime = (<div>
      <strong><i>{moment(this.state.ride.visit_time).format('MM/DD/YYYY h:mm a')}</i> </strong>
      <br></br>
    </div>);

    let visitLabel = 'Visit';
    if (this.state.ride.trip_type.key === 'from_visit' || this.state.ride.trip_type.key === 'from_visit_call') {
      visitLabel = 'DropOff'
      if (this.state.ride.status.key === 'willCall' || this.state.ride.status.key === 'pending' || this.state.ride.status.key === 'scheduled') {
        visitTime = '';
      }
    }

    if ((this.state.ride.status.key === 'willCall' && this.state.ride.trip_type.key === 'from_visit_call') ||
      (this.state.ride.status.key === 'droppedOff' && this.state.ride.visit.trip_type.key === 'roundtrip_call' && this.state.ride.trip_type.key === 'to_visit')) {
      actionButtons = [
        <RaisedButton
          label="I am Ready"
          primary={true}
          onTouchTap={this.handleReady}
        />,
        <RaisedButton
          label="Cancel"
          style={{ margintop: '0px' }}
          primary={false}
          onTouchTap={this.handleCancel}
        />
      ]

      if ((this.state.ride.status.key === 'willCall' && this.state.ride.trip_type.key === 'from_visit_call')) {
        pickupTime = this.state.ride.status.value
      }
    }

    var etaSummary;
    if (this.state.ride.route.eta_formatted == "0 minutes") { etaSummary = "" } else { etaSummary = this.state.ride.route.eta_formatted };
    var statusSummary;
    statusSummary = (
      <tr style={{ height: '10px' }}>
        <td style={{ fontWeight: 'bold', borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Passenger</td>
        <td style={{ fontWeight: 'bold', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Status</td>

        <td style={{ fontWeight: 'bold', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Type</td>
        <td style={{ fontWeight: 'bold', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Actions</td>
        <td style={{ fontWeight: 'bold', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>ETA</td>
      </tr>
    );

    var carInfo;
    if (this.state.ride.status.key === "accepted" || this.state.ride.status.key === "droppedOff" || this.state.ride.status.key === "arrived" || this.state.ride.status.key === "pickedUp") {
      carInfo = (
        <tr >
          <td style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">{this.state.ride.user.name}</td>
          <td style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">
            {this.state.ride.status.value}
          </td>
          <td style={{ fontWeight: 'normal', color: '#424242', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">
            {this.state.ride.trip_type.value.replace(' / Will Call', '')}
          </td>
          <td style={{ fontWeight: 'normal', color: '#424242', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">
            {rightIconMenu}
          </td>
          <td style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">{etaSummary}</td>
        </tr>
      )
    }
    else {
      carInfo = (
        <tr >
          <td style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">{this.state.ride.user.name}</td>
          <td style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">
            {this.state.ride.status.value}
          </td>
          <td style={{ fontWeight: 'normal', color: '#424242', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">
            {this.state.ride.trip_type.value.replace(' / Will Call', '')}
          </td>
          <td style={{ fontWeight: 'normal', color: '#424242', borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">
            {rightIconMenu}
          </td>
          <td style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '20px', borderStyle: 'solid', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric"></td>
        </tr>
      )
    }

    var carInfo2;
    if (this.state.ride.status.key === "accepted" || this.state.ride.status.key === "droppedOff" || this.state.ride.status.key === "arrived" || this.state.ride.status.key === "pickedUp") {
      carInfo2 = (
        <div >
          <div style={{ float: 'left' }} >
            <div style={{ marginBottom: '0px' }} > <strong>{this.state.ride.vehicle.make}{this.state.ride.vehicle.model}</strong></div>
            <div style={{ fontSize: '10px' }} > {this.state.ride.vehicle.license_plate}</div>
          </div>
          <div style={{ float: 'left' }} >
            <img src={this.state.ride.vehicle.image_url} style={carImageStyle} />
            <Avatar
              src={this.state.ride.driver.image_url}
              size={40}
            />
          </div>

          <div style={{ float: 'left', marginLeft: '10px', marginBottom: '0px' }} >
            <div style={{ marginBottom: '0px' }} >  <strong>{this.state.ride.driver.first_name}</strong></div>
            <div style={{ fontSize: '10px', margintop: '0px', float: 'left' }} > <i>{this.state.ride.driver.rating}</i>  </div>
            <div style={{ position: 'relative', marginLeft: '14px', bottom: '20px', marginBottom: '0px', float: 'right', verticalAlign: 'top' }} >
            </div>
          </div>
        </div>
      )
    }
    else {
      carInfo2 = (
        <div >
          <div style={{ float: 'left' }} >
            <div style={{ marginBottom: '0px' }} ></div>
            <div style={{ fontSize: '10px' }} >  </div>
          </div>
          <div style={{ float: 'left' }} >

          </div>

          <div style={{ float: 'left', marginLeft: '10px', marginBottom: '0px' }} >
            <div style={{ marginBottom: '0px' }} > </div>
            <div style={{ fontSize: '10px', margintop: '0px', float: 'left' }} >   </div>
            <div style={{ position: 'relative', marginLeft: '14px', bottom: '20px', marginBottom: '0px', float: 'right', verticalAlign: 'top' }} >
            </div>
          </div>
        </div>
      )
    }

    let pickupAddress = (
      <tbody>
        <tr >
          <td style={{ padding: '4px' }} className="numeric">
            <strong>{this.state.ride.route.origin.name}</strong>
            <br></br>
            <strong><i> {pickupTime}</i> </strong><br />
            {this.state.ride.route.origin.address}
          </td>
          <td style={{ width: '35px' }}></td>
          <td ><strong>Pickup</strong></td>
        </tr>
      </tbody>)

    let dropOffAddress = (
      <tbody>
        <tr >
          <td style={{ padding: '4px' }} className="numeric">
            <strong>{this.state.ride.route.destination.name}</strong>
            <br />
            {visitTime}
            {this.state.ride.route.destination.address}
          </td>
          <td style={{ width: '35px' }}></td>
          <td style={{ verticalAlign: 'top', align: 'right' }}><strong>Drop Off</strong></td>
        </tr>
      </tbody>);
    if (this.state.ride.trip_type.key !== 'to_visit') {
      pickupAddress = (
        <tbody>
          <tr >
            <td style={{ padding: '4px' }} className="numeric">
              <strong>{this.state.ride.route.destination.name}</strong>
              <br></br>
              Pickup Time: <strong><i> {pickupTime}</i> </strong><br />
              {this.state.ride.route.destination.address}
            </td>
            <td style={{ width: '35px' }}></td>
            <td ><strong>Medical Provider</strong></td>
          </tr>
        </tbody>)
      dropOffAddress = (
        <tbody>
          <tr >
            <td style={{ padding: '4px' }} className="numeric">
              <strong>{this.state.ride.route.origin.name}</strong>
              <br />
              {visitTime}
              Drop off: {this.state.ride.route.origin.address}
            </td>
            <td style={{ width: '35px' }}></td>
            <td style={{ verticalAlign: 'top', align: 'right' }}><strong>Member Location</strong></td>
          </tr>
        </tbody>);
    }

    return (
      <article style={{ backgroundColor: 'aliceblue' }} className="article padding-sm-v article-bordered">

        <GMaps data={this.state.ride} />
        <div className="container-fluid with-maxwidth" style={{ padding: '0px' }} >
          <div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .90, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
            <div className="float-left" style={rightStyle}>
            </div>
          </div>

          <div className="col-md-12" style={{ margin: '0px', padding: '0px', opacity: .9, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
            <div className="box box-default" style={{ maxWidth: '520px', width: '100%', position: 'relative', marginBottom: '2px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
              <div className="box-body" style={{ paddingLeft: '20px', paddingTop: '3px', paddingBottom: '0px', paddingRight: '0px' }} >

                <div className="float-left">

                  <table className="" style={{ fontSize: '11px', margin: '0px', border: '0px', padding: '0px', opacity: .9 }}>
                    <thead >
                      <tr style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}></tr>
                      <tr style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}></tr>
                      <tr style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric"></tr>
                    </thead>
                    <tbody>
                      {statusSummary}
                      {carInfo}

                    </tbody>
                  </table>

                  <table className="" style={{ fontSize: '11px', margin: '0px', border: '0px', padding: '0px', opacity: .9 }}>
                    <tbody>

                      <tr >
                        <td style={{ padding: '4px', marginRight: '41px' }} className="numeric">
                          {carInfo2}
                          {actionButtons}

                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>

                <div className="float-left">
                  <table className="" style={{ fontSize: '11px', margin: '0px', border: '0px', padding: '0px', opacity: .8 }}>
                    {pickupAddress}
                    {dropOffAddress}
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Dialog
          title={this.state.dialogTitleMessage}
          actions={actions}
          modal={false}
          open={this.state.dialogOpen}
          onRequestClose={this.handleClose}
        >
          {this.state.dialogMessage}
        </Dialog>
      </article>
    )
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      timeout: null,
      user: {
        "useruuid": "",
        "name": "",
        "member": ""
      },
      ride: {
        "ride_uuid": "",
        "user": {
          "useruuid": "",
          "name": "",
          "member": ""
        },
        "status": {
          "key": "",
          "value": ""
        },
        "type": {
          "key": "",
          "value": ""
        },
        "notes": "",
        "driver": {
          "rating": "",
          "image_url": "",
          "first_name": "",
          "phone_number": ""
        },
        "vehicle": {
          "color": "",
          "make": "",
          "license_plate": "",
          "image_url": "",
          "year": 0,
          "license_plate_state": "",
          "model": ""
        },
        "route": {
          "origin": {
            "name": "",
            "lat": 0,
            "lng": 0,
            "address": ""
          },
          "destination": {
            "name": "",
            "lat": 0,
            "lng": 0,
            "address": ""
          },
          "location": {
            "lat": 0,
            "lng": 0,
            "bearing": 0
          },
          "route_kml": "",
          "distance": 0,
          "duration": 0,
          "eta": 0
        },
        "visit": {
          "visit_external_id": "",
        },
        "visit_date": new Date(),
        "visit_time": new Date(),
        "pickup_time": new Date()
      }
    }

    this.refreshContent = this.refreshContent.bind(this);
    this.rideUpdate = this.rideUpdate.bind(this);
    this.rideNotification = this.rideNotification.bind(this);
  }

  componentDidMount() {
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }

    this.refreshContent(this.props.params.ride_uuid, this.props.params.user_uuid);
  }

  refreshContent(ride_uuid, user_uuid) {
    let self = this;
    Instance.setToken(null).get('/v1/ext/' + ride_uuid + '/' + user_uuid).then((res) => {
      self.setState(Object.assign(self.state, { ride: res.data, user: res.data.user }));
      switch (self.state.ride.status.key) {
        case "accepted":
        case "arrived":
        case "pickedUp":
        case "pending":
          const timeout = setTimeout(function () {
            this.refreshContent(ride_uuid, user_uuid);
          }.bind(this), 15000);

          self.setState(Object.assign(self.state, { timeout: timeout }));
          break;
      }
    }).catch(err => {
      console.error('Error to get riders: ', err);
    });
  }

  rideUpdate(ride) {
    if (this.state.timeout) {
      clearTimeout(this.state.timeout);
    }
    if (ride) {
      this.setState(Object.assign(this.state, { ride: ride, user: ride.user }));
      this.refreshContent(ride.ride_uuid, ride.user.useruuid);
    }
  }

  rideNotification(ride) {
    console.log(ride);
  }

  render() {
    return (
      <section className="chapter">
        <QueueAnim type="top" className="ui-animate">
          <div key="3"><Services data={getConfirmationData()} params={this.state.ride} onRideUpdate={this.rideUpdate} /></div>
          <Notification user={this.state.user} onRideUpdate={this.rideNotification} />
        </QueueAnim>
      </section>
    );
  }
};

module.exports = Page;