import React, { Component } from 'react';
import QueueAnim from 'rc-queue-anim';

import AutoComplete from 'material-ui/AutoComplete';
import { Tabs, Tab } from 'material-ui/Tabs';
import Slider from 'material-ui/Slider';
import TimePicker from 'material-ui/TimePicker';
import DatePicker from 'material-ui/DatePicker';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';
import Snackbar from 'material-ui/Snackbar';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';

import MenuItem from 'material-ui/MenuItem';
import SelectField from 'material-ui/SelectField';
import DropDownMenu from 'material-ui/DropDownMenu';

import { List, ListItem } from 'material-ui/List';
import ListExampleSimple from '../../../../ui/routes/lists/components/Simple';
import ListExampleMessages from '../../../../ui/routes/lists/components/Messages';

import Dialog from 'material-ui/Dialog';
import ToolbarSection from '../../../../ui/routes/components/components/Toolbar2.js';
import BottomNavigationExampleSimple from '../../../../ui/routes/components/components/BottomNavigation';
import App from '../../../../pages/routes/geosuggest/components/geosuggest.js';

import { NEMTLocation } from '../../../../../components/NEMTLocation';

import GMaps from './Maps'

import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import Divider from 'material-ui/Divider';

import IconMenu from 'material-ui/IconMenu';
import IconButton from 'material-ui/IconButton';
import Download from 'material-ui/svg-icons/file/file-download';
import ArrowDropRight from 'material-ui/svg-icons/navigation-arrow-drop-right';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';

import ActionHome from 'material-ui/svg-icons/action/home';
import ActionWork from 'material-ui/svg-icons/action/work';
import MapsMyLocation from 'material-ui/svg-icons/maps/my-location';
import MapsAddLocation from 'material-ui/svg-icons/maps/add-location';
import MapsNearMe from 'material-ui/svg-icons/maps/near-me';
import MapsLocalHospital from 'material-ui/svg-icons/maps/local-hospital';
import MapsLocalPharrmacy from 'material-ui/svg-icons/maps/local-pharmacy';

import { fullWhite } from 'material-ui/styles/colors';
import ActionAndroid from 'material-ui/svg-icons/action/android';
import FontIcon from 'material-ui/FontIcon';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MuiGeoSuggest from 'material-ui-geosuggest';
import { orange500, blue500 } from 'material-ui/styles/colors';

import areIntlLocalesSupported from 'intl-locales-supported';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentAdd from 'material-ui/svg-icons/content/add';
import moment from 'moment';

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



const axios = require('axios');
const setCookie = function (cname, cvalue, date) {
  var d = new Date(date * 1000);
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
const getCookie = function (cname) {
  console.log('test');
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
let instance = {};
let token = getCookie('token');
if (!token || token === null || token === undefined || token === '') {
  location.href = "/#/login";
} else {
  instance = axios.create({
    baseURL: 'https://portal-api.bcbsinstitute.com',
    headers: { App: localStorage.getItem('App'), Token: 'Bearer ' + token },
  });
}

let DateTimeFormat;

// /**
//  * Use the native Intl.DateTimeFormat if available, or a polyfill if not.
//  */
if (areIntlLocalesSupported(['fr', 'fa-IR'])) {
  DateTimeFormat = global.Intl.DateTimeFormat;
}
// else {
//   const IntlPolyfill = require('intl');
//   DateTimeFormat = IntlPolyfill.DateTimeFormat;
//   require('intl/locale-data/jsonp/fr');
//   require('intl/locale-data/jsonp/fa-IR');
// }


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": ""
        },
        "status": {
          "key": "",
          "value": ""
        },
        "type": {
          "key": "",
          "value": ""
        },
        "notes": "",
        "passenger": {
          "user_id": "",
          "image_url": "",
          "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": ""
          },
          "location": {
            "lat": 0,
            "lng": 0,
            "bearing": 0
          },
          "route_kml": "",
          "distance": 0,
          "duration": 0,
          "eta": 0,
          "eta_formatted": '',
        },
        "visit": {
          "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": "",
          "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": ""
          }
        }
      }
    }
  }

  static propTypes = {
    data: React.PropTypes.object.isRequired,
    params: React.PropTypes.object.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.id) params.visit.destination.id = "";
    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;

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

  componentDidMount() {
    let data = this.props.data;
    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.id) params.visit.destination.id = "";
    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;

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

  handlePickupChanged(res, state) {
    let route = state.state.ride.route;
    route.origin = {
      name: res.name,
      lat: res.lat,
      lng: res.lng,
      address: res.address
    }

    let ride = state.state.ride;
    ride.route = route;

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

  handleProviderChanged(res, state) {
    debugger;
    let route = state.state.ride.route;
    route.destination = {
      name: res.name,
      lat: res.lat,
      lng: res.lng,
      address: res.address
    }

    let ride = state.state.ride;
    ride.route = route;

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

  handleStatusChange(event, index, value, state) {
    let self = state;
    let ride = this.state.ride;
    ride.status.key = value;
    ride.status.value = event.target.innerText;

    instance.get(`/v1/lyfthook/${ride.ride_uuid}/${ride.status.key}`).then(res => {
      res.data.visitDate = new Date(res.data.visitDate);
      res.data.visitTime = new Date(res.data.visitTime);
      res.data.pickupTime = new Date(res.data.pickupTime);

      var minutes = Math.floor(res.data.route.eta / 60);
      var seconds = res.data.route.eta % 60;
      var formattedTime = `${minutes} minutes`
      if (seconds > 0) {
        formattedTime += ` ${seconds} seconds`
      }
      res.data.route.eta_formatted = formattedTime;

      self.setState(Object.assign(self.state, {
        ride: res.data,
      }))
    }).catch(err => {
      console.error(err);
    });
  }

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

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

    let carInfo = (
      <tr >
        <td style={{ padding: '4px' }} className="numeric">{this.state.ride.passenger.first_name} {this.state.ride.passenger.last_name}</td>
        <td style={{ padding: '4px' }} className="numeric">
          {this.state.ride.status.value}
        </td>
        <td style={{ padding: '4px' }} className="numeric">{this.state.ride.route.eta_formatted}</td>
        <td style={{ padding: '4px' }} className="numeric"> <img src={this.state.ride.vehicle.image_url} style={carImageStyle} /> {this.state.ride.vehicle.color} {this.state.ride.vehicle.make} {this.state.ride.vehicle.model} ({this.state.ride.vehicle.license_plate}) </td>
      </tr>
    );
    if (this.state.ride.status.key === "pending") {
      carInfo = (
        <tr >
          <td style={{ padding: '4px' }} className="numeric">{this.state.ride.passenger.first_name} {this.state.ride.passenger.last_name}</td>
          <td style={{ padding: '4px' }} className="numeric">
            {this.state.ride.status.value}
          </td>
          <td style={{ padding: '4px' }} className="numeric"></td>
          <td style={{ padding: '4px' }} className="numeric"></td>
        </tr>)
    }

    return (

      <article className="article padding-sm-v article-bordered">
        <GMaps data={this.state.ride} />
        <div className="container-fluid with-maxwidth" style={{ bottom: '55px', padding: '0px' }} >
          <div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .90, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
            <div className="float-right" 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={{ 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="cf" style={{ fontSize: '11px', margin: '0px', border: '0px', padding: '0px', opacity: .9 }}>

                    <thead >
                      <tr>
                        <th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Passenger</th>
                        <th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Status</th>
                        <th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">ETA</th>
                        <th style={{ paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }} className="numeric">Vehicle</th>
                      </tr>
                    </thead>
                    <tbody>
                      {carInfo}
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
          </div>

          <div className="col-md-12" style={{ margin: '0px', padding: '0px', opacity: .9, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
            <div className="box box-default" style={{ position: 'relative', marginBottom: '2px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
              <div className="box-body" style={{ paddingLeft: '20px', paddingTop: '0px', paddingBottom: '0px', paddingRight: '0px' }} >
                <div className="float-left">
                  <DatePicker
                    id='pickupDatePicker'
                    hintText="Ride Date"
                    firstDayOfWeek={0}
                    container="inline"
                    textFieldStyle={{ width: '90px' }}
                    floatingLabelStyle={styles.floatingLabelStyle}
                    floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
                    value={this.state.ride.visit_date}
                  />
                  <NEMTLocation data={data} title={'Pickup'} value={""} buttonvalue={this.state.ride.route.origin.name} onPlaceChanged={(event) => this.handlePickupChanged(event, this)} textSize={15} locationType={"pickup"} type={"primary"} icon={<MapsAddLocation color={fullWhite} />} />
                </div>
                <div className="float-right" style={rightStyle}>
                  <TimePicker
                    floatingLabelText="Pickup"
                    floatingLabelFixed={true}
                    id='pickupTimePicker'
                    hintText="Pickup TIme"
                    format="ampm"
                    minutesStep={5}
                    value={this.state.ride.pickup_time}
                    textFieldStyle={{ width: '70px', color: 'rgb(0, 153, 204) !important' }}
                    style={{ width: '100px', color: 'rgba(0, 153, 204) !important' }}
                  />
                </div>
              </div>
            </div>
          </div>

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

                  <DatePicker
                    id='pickupDatePicker'
                    hintText="Visit Date"
                    firstDayOfWeek={0}
                    container="inline"
                    textFieldStyle={{ width: '90px' }}
                    floatingLabelStyle={styles.floatingLabelStyle}
                    floatingLabelFocusStyle={styles.floatingLabelFocusStyle}
                    value={this.state.ride.visit_date}
                  />

                  <NEMTLocation data={data} title={"Destination"} value={""} buttonvalue={this.state.ride.route.destination.name} onPlaceChanged={(event) => this.handleProviderChanged(event, this)} textSize={15} locationType={"provider"} type={'secondary'} icon={<MapsNearMe color={fullWhite} />} />

                </div>
                <div className="float-right" style={rightStyle}>
                  <TimePicker
                    floatingLabelText="Visit Time"
                    floatingLabelFixed={true}
                    format="ampm"
                    hintText="Visit Time"
                    textFieldStyle={{ width: '80px', color: 'rgb(0, 153, 204) !important' }}
                    value={this.state.ride.visit_time}
                    onChange={this.handleTime}
                    minutesStep={5}
                  />
                </div>
              </div>
            </div>
          </div>

          <Card
            style={{ color: '#424242', fontSize: '12px', borderRadius: '0px' }}
          >
            <CardHeader
              title="Details"
              actAsExpander
              showExpandableButton
              titleColor="#424242"
              subtitleColor="#424242"
              style={{ color: '#424242', borderRadius: '0px' }}
            />
            <CardText
              expandable
              style={{ color: '#424242', fontSize: '9px', borderRadius: '0px' }}
            >
              <div className="box box-default table-box table-flip-scroll mdl-shadow--2dp">
                <table className="mdl-data-table table-bordered table-striped cf no-margin">
                  <thead className="cf">
                    <tr>
                      <th className="numeric">Passenger</th>
                      <th className="numeric">Phone</th>
                      <th className="numeric">MemberID</th>
                      <th className="numeric">RideID</th>
                      <th className="numeric">Status</th>
                      <th className="numeric">Distance</th>
                      <th className="numeric">Duration</th>
                      <th className="numeric">ETA</th>
                      <th className="numeric">Vehicle</th>
                      <th className="numeric">Driver</th>
                      <th className="numeric">Driver Phone</th>
                      <th className="numeric">Provider ID</th>
                      <th className="numeric">Provider</th>
                      <th className="numeric">Visit ID</th>
                      <th className="numeric">Visit External ID</th>
                      <th className="numeric">Notes</th>
                      <th className="numeric">Scheduler</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td className="numeric">{this.state.ride.passenger.first_name} {this.state.ride.passenger.last_name}</td>
                      <td className="numeric">{this.state.ride.passenger.phone_number}</td>
                      <td className="numeric">{this.state.ride.user.member}</td>
                      <td className="numeric">{this.state.ride.ride_uuid}</td>
                      <td className="numeric">
                        <DropDownMenu
                          value={this.state.ride.status.value}
                          onChange={(e, i, v) => { this.handleStatusChange(e, i, v, this) }}
                        >
                          <MenuItem value={'accepted'} primaryText="Accepted" />
                          <MenuItem value={'scheduled'} primaryText="Scheduled" />
                          <MenuItem value={'canceled'} primaryText="Canceled" />
                          <MenuItem value={'pending'} primaryText="Pending" />
                          <MenuItem value={'arrived'} primaryText="Arrived" />
                          <MenuItem value={'pickedUp'} primaryText="Picked Up" />
                          <MenuItem value={'droppedOff'} primaryText="Dropped Off" />
                        </DropDownMenu>
                      </td>
                      <td className="numeric">{this.state.ride.route.distance} miles</td>
                      <td className="numeric">{this.state.ride.route.duration} seconds</td>
                      <td className="numeric">{this.state.ride.route.eta_formatted}</td>
                      <td className="numeric"> <img src={this.state.ride.vehicle.image_url} style={carImageStyle} /> {this.state.ride.vehicle.color} {this.state.ride.vehicle.make} {this.state.ride.vehicle.model} | {this.state.ride.vehicle.license_plate_state} | {this.state.ride.vehicle.license_plate} </td>
                      <td className="numeric">{this.state.ride.driver.first_name} ({this.state.ride.driver.rating} stars)</td>
                      <td className="numeric">{this.state.ride.driver.phone_number} </td>
                      <td className="numeric">{this.state.ride.visit.destination.id} </td>
                      <td className="numeric">{this.state.ride.visit.destination.name} </td>
                      <td className="numeric">{this.state.ride.visit.visit_uuid} </td>
                      <td className="numeric">{this.state.ride.visit.visit_external_id} </td>
                      <td className="numeric">{this.state.ride.notes}</td>
                      <td className="numeric">{this.state.ride.visit.created_user.name}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </CardText>
          </Card>



        </div>

      </article >
    )
  }
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      ride: {
        "ride_uuid": "",
        "user": {
          "useruuid": "",
          "name": "",
          "member": ""
        },
        "status": {
          "key": "",
          "value": ""
        },
        "type": {
          "key": "",
          "value": ""
        },
        "notes": "",
        "passenger": {
          "user_id": "",
          "image_url": "",
          "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": ""
          },
          "location": {
            "lat": 0,
            "lng": 0,
            "bearing": 0
          },
          "route_kml": "",
          "distance": 0,
          "duration": 0,
          "eta": 0
        },
        "visit": {
          "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()
      }
    }
  }

  componentDidMount() {
    this.refreshContent(this);
  }

  refreshContent(reactState) {
    let self = reactState;
    instance.get('/v1/nemt/rides/' + self.props.params.ride_uuid + '/eta').then((res) => {
      self.setState(Object.assign(self.state, { ride: res.data }));
      switch (self.state.ride.status.key) {
        case "accepted":
        case "arrived":
        case "pickedUp":
        case "pending":
          setTimeout(function () {
            this.refreshContent(self);
          }.bind(this), 60000);
          break;
      }
    }).catch(err => {
      console.error('Error to get riders: ', err);
    });
  }

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

module.exports = Page;