import React, { Component } from 'react';
import {
  Step,
  Stepper,
  StepButton,
  StepContent,
} from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';
import QueueAnim from 'rc-queue-anim';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
import ActionFavorite from 'material-ui/svg-icons/action/favorite';
import ActionFavoriteBorder from 'material-ui/svg-icons/action/favorite-border';
import AutoComplete from 'material-ui/AutoComplete';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
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 { NEMTLocation } from '../../../../../components/NEMTLocation';
import { request } from 'https';
import Divider from 'material-ui/Divider';
import Paper from 'material-ui/Paper';
import Dialog from 'material-ui/Dialog';
import Close from 'material-ui/svg-icons/navigation/close'
import CommunicationCall from 'material-ui/svg-icons/communication/call'
import Message from 'material-ui/svg-icons/communication/message'
import Instance from '../../../../../../../components/Connection';
import ValidationErrorsInfoDialog from '../../../../../../../components/Shared/ValidationErrorsInfoDialog';
import Checkbox from 'material-ui/Checkbox';
import Popover from 'material-ui/Popover';

const ADDRESS_TYPE_HOME = "home";

let DateTimeFormat;
const roundingTime = 1000 * 60 * 5; //5 minutes


DateTimeFormat = global.Intl.DateTimeFormat;


export class DialogExampleSimple extends React.Component {
  state = {
    open: true,
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const actions = [
      <FlatButton
        label="Cancel"
        primary={true}
        onClick={this.handleClose}
      />,
      <FlatButton
        label="Submit"
        primary={true}
        keyboardFocused={true}
        onClick={this.handleClose}
      />,
    ];

    return (
      <div>
        <Dialog
          title="Dialog With Actions"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          The actions in this window were passed in as an array of React objects.
        </Dialog>
      </div>
    );
  }
}
/**
 * Dialogs can be nested. This example opens a Date Picker from within a Dialog.
 */
export class DialogExampleDialogDatePicker extends React.Component {
  state = {
    open: false,
    additionalPassenger:
      {
        passengerType: '',
        seatType: '',
      }
  };

  handleOpen = () => {
    this.setState({ open: true });
  };


  handlePassengerTypeChange = (e, i, v, state) => {
    this.setState({ additionalPassenger: { passengerType: v } });
  };

  handleSeatTypeChange = (e, i, v, state) => {
    this.setState({ additionalPassenger: { seatType: v } });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const actions = [
      <FlatButton
        label="Add"
        primary={true}
        keyboardFocused={true}
        onClick={this.handleClose}
      />,
      <FlatButton
        label="Cancel"
        primary={false}
        keyboardFocused={false}
        onClick={this.handleClose}
      />,
    ];

    return (
      <div>
        <RaisedButton style={{ fontSize: 5 }} label="+ Passenger" onClick={this.handleOpen} />
        <Dialog
          title="Add Passenger"
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={this.handleClose}
        >
          <SelectField
            floatingLabelText="Passenger Type"
            value={this.state.additionalPassenger.passengerType}
            onChange={(e, i, v) => this.handlePassengerTypeChange(e, i, v, this)}
            autoWidth={true}
          >
            <MenuItem value={'Caregiver'} primaryText="Caregiver" />
            <MenuItem value={'Companion'} primaryText="Companion" />
            <MenuItem value={'Additional Patient'} primaryText="Additional Patient" />
          </SelectField>
          <SelectField
            floatingLabelText="Seat Type"
            value={this.state.additionalPassenger.seatType}
            onChange={(e, i, v) => this.handleSeatTypeChange(e, i, v, this)}
            autoWidth={true}
          >
            <MenuItem value={'Ambulatory'} primaryText="Ambulatory" />
            <MenuItem value={'Stretcher'} primaryText="Stretcher" />
            <MenuItem value={'Wheelchair'} primaryText="Wheelchair" />
          </SelectField>

        </Dialog>
      </div>
    );
  }
}
const names = [
  'Service Animal',
  'Cane / Quad Cane',
  'Electric Wheelchair',
  'Oxygen Tank',
  'Sign Language',
  'White Cane',
  'Leg Braces',
  'Crutches',
  'Manual Wheelchair',
  'Prothesis',
  'Walker',
];

/**
 * `SelectField` can handle multiple selections. It is enabled with the `multiple` property.
 */
export class SelectFieldExampleMultiSelect extends Component {
  state = {
    values: [],
  };

  handleChange = (event, index, values) => this.setState({ values });

  menuItems(values) {
    return names.map((name) => (
      <MenuItem
        key={name}
        insetChildren={true}
        checked={values && values.indexOf(name) > -1}
        value={name}
        primaryText={name}
        autoWidth={false}
        style={{ width: 215 }}
      />
    ));
  }

  render() {
    const { values } = this.state;
    return (
      <SelectField
        autoWidth={false}
        style={{ width: 215 }}
        multiple={true}
        value={values}
        floatingLabelText="Mobility Aids"
        label="Mobility Aids"
        onChange={this.handleChange}
      >
        {this.menuItems(values)}
      </SelectField>
    );
  }
}

const axios = require('axios');

const selectStyles = {
  customWidth: {
    width: 35,
  },
};




var tripType = 'To Visit';
var pickupTimeReturnDisplayMode = "none";
/**
 * `SelectField` is implemented as a controlled component,
 * with the current selection set through the `value` property.
 * The `SelectField` can be disabled with the `disabled` property.
 */
export class SelectFieldExampleSimple extends Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      value: 'to_visit',
      pickupTimeReturnDisplayMode: 'none',
      pickupTimeHide: false,
    };
  }

  componentDidMount() {
    this.setState(Object.assign(this.state, { value: this.props.value }));
  }

  handleChange(event, index, value, state) {
    let self = state
    tripType = value;
    switch (tripType) {

      case 'from_visit':
        pickupTimeReturnDisplayMode = "none"
        self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'from_visit', pickupTimeHide: false }));
        break;

      case 'from_visit_call':
        pickupTimeReturnDisplayMode = "none"
        self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'from_visit_call', pickupTimeHide: true }));
        break;


      case 'to_visit':
        pickupTimeReturnDisplayMode = "none"
        self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'to_visit', pickupTimeHide: false }));
        break;


      case 'roundtrip':
        pickupTimeReturnDisplayMode = "block"
        self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'block', value: 'roundtrip', pickupTimeHide: false }));
        break;

      case 'roundtrip_call':
        pickupTimeReturnDisplayMode = "none";
        self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'none', value: 'roundtrip_call', pickupTimeHide: false }));
        break;

      default:
        self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: 'block', value: 'roundtrip', pickupTimeHide: false }));
        break;
    }

    if (this.props.handleChange) {
      this.props.handleChange(event, index, { pickupTimeReturnDisplayMode: self.state.pickupTimeReturnDisplayMode, selectField: this.state.value, pickupTimeHide: this.state.pickupTimeHide });
    }
  }

  render() {
    return (
      <div  >
        <SelectField
          floatingLabelText="Trip Type"
          value={this.state.value}
          onChange={(e, i, v) => this.handleChange(e, i, v, this)}
          autoWidth={false}
          style={{ width: 230 }}
        >
          <MenuItem value={'to_visit'} primaryText="To Visit" />
          <MenuItem value={'from_visit'} primaryText="From Visit" />
          <MenuItem value={'from_visit_call'} primaryText="From Visit / Will Call" />
          <MenuItem value={'roundtrip'} primaryText="Round Trip" />
          <MenuItem value={'roundtrip_call'} primaryText="Round Trip / Will Call" />
        </SelectField>
      </div>
    );
  }
}


function disableWeekends(date) {
  return date.getDay() === 0 || date.getDay() === 6;
}


const styles = {
  padding: '12px 18px',
  marginBottom: 12,
  fontWeight: 400,
  maxWidth: 250,
  radioButton: {
    marginTop: 6
  },
  checkbox: {
    marginTop: 16, fontWeight: 100, fontSize: 10
  },
};



// const styles = {
//   block: {
//     maxWidth: 250,
//   },
//   checkbox: {
//     marginBottom: 16,fontWeight:'regular'
//   },
// };

function handleActive(tab) {
  console.log(`A tab with this route property ${tab.props.route} was activated.`);
}


const
  dataConfig = { text: 'text', value: 'value' };


/**
 * A basic vertical non-linear implementation
 */
class VerticalNonLinear extends React.Component {
  constructor(props) {
    super(props);

    let dateNow = new Date();

    this.state = {
      stepIndex: 0,
      rideTypeValue: 0,
      providerID: 0,
      providerName: '',
      visitDate: new Date(),
      visitTime: new Date(Math.round(dateNow.getTime() / roundingTime) * roundingTime),
      pickupLocation: null,
      pickupTime: new Date(Math.round(dateNow.getTime() / roundingTime) * roundingTime),
      pickupTimeReturn: new Date(Math.round(dateNow.getTime() / roundingTime) * roundingTime),
      pickupTimeReturnDisplayMode: 'none',
      open: false,
      message: 'Booking Ride',
      origin: {},
      destination: {},
      buttonPickupText: 'Member Address',
      buttodDropOffText: 'Choose Drop-Off location',
      buttonProviderText: 'Choose Provider',
      user: null,
      showUserSelection: true,
      userSelectionText: '',
      users: [],
      visit_external_id: "",
      notes: "",
      pickupTimeReturnDisplayMode: "none",
      eta: {
        distance_miles: 0,
        duration_seconds: 0,
        formatted_time: 0,
        showed: false,
      },
      trip_type: {
        key: "to_visit",
        value: ""
      },
      return_time: new Date(),
      pickupTimeHide: false,
      showValidationErrors: false,
      validationErrors: [],
    };
  }

  componentDidMount() {
    const loggedUser = JSON.parse(localStorage.getItem("loggedUser"));
    let state = this;

    let user = {
      useruuid: this.props.params.uuid
    }

    if (user.useruuid !== loggedUser.useruuid) {
      Instance.getRawConn().get(`/v1/nemt/users/member/${user.useruuid}`)
        .then(function (res) {
          let userHomeAddress = null;
          res.data.addresses.forEach(address => {
            if (address.address_type === ADDRESS_TYPE_HOME) {
              userHomeAddress = address;
            }
          });
          if (userHomeAddress != null) {
            userHomeAddress.name = "Home";
            state.handlePickupChanged(userHomeAddress, state);
          }
          state.setState(Object.assign(state.state, { user: res.data, showUserSelection: true, userSelectionText: `${res.data.member} - ${res.data.name}` }));
        })
        .catch(err => {
          if (err.response.status !== 422) {
            console.error(err);
          }
        });
    }

    Instance.getRawConn().get(`/v1/nemt/users/member`)
      .then(function (res) {
        let users = res.data.map(u => { return Object.assign(u, { userdata: `${u.member} - ${u.name}` }) });
        state.setState(Object.assign(state.state, { users: users, showUserSelection: true, stepIndex: 0 }));
      })
      .catch(err => {
        if (err.response.status !== 422) {
          console.error(err);
        }
      });

    let date = new Date();

    let visitTime = new Date(Math.round((date.getTime() + (1 * 60 * 60 * 1000)) / roundingTime) * roundingTime);
    let visitDate = date;
    let pickupTime = new Date(Math.round((visitTime.getTime() - (0.5 * 60 * 60 * 1000)) / roundingTime) * roundingTime);
    let pickupTimeReturn = new Date(Math.round((visitTime.getTime() - (0.5 * 60 * 60 * 1000)) / roundingTime) * roundingTime);

    this.setState(Object.assign(this.state, {
      visitDate: visitDate,
      visitTime: visitTime,
      pickupTime: pickupTime,
      pickupTimeReturn: pickupTimeReturn,
    }));
  }
  //for snackbar
  handleTouchTap() {
    this.setState(Object.assign(this.state, {
      open: true,
    }));
  };

  handleRequestClose(state) {
    let self = state;
    self.setState(Object.assign(self.state, {
      open: false,
    }));
  };

  handleNext(state) {
    let self = state;
    const { stepIndex } = self.state;
    if (stepIndex < 4) {
      self.setState(Object.assign(self.state, { stepIndex: stepIndex + 1 }));
      if (stepIndex === 3) {
        self.handleTouchTap();
        var requestRide = {
          user_uuid: state.state.user ? state.state.user.useruuid : '',
          user_consent: state.state.checked,
          ride_type: "lyft",
          origin: state.state.origin,
          destination: state.state.destination,
          external_note: state.state.notes,
          visit_date: state.state.visitDate,
          visit_time: state.state.visitTime,
          pickup_time: state.state.pickupTime,
          visit_external_id: state.state.visit_external_id,
          distance: 0,
          duration: 0,
          eta: 0,
          trip_type: state.state.trip_type,
          return_time: state.state.return_time,
        };

        if (self.state.eta.distance_miles) requestRide.distance = self.state.eta.distance_miles;
        if (self.state.eta.duration_seconds) requestRide.duration = self.state.eta.duration_seconds;

        requestRide.origin.name = self.state.pickupLocation
        requestRide.destination.name = self.state.providerName

        if (self.diffMinutes(state.state.pickupTime, new Date()) > 10) {
          requestRide.scheduled_pickup_range = {
            range_ms: null,
            timestamp_ms: new Date(self.state.pickupTime).getTime()
          }
        }

        Instance.getRawConn().post('/v1/nemt/rides', requestRide).then(function (res) {
          self.handleRequestClose(self);
          window.location.href = '/#/app/page/map/' + res.data.ride_uuid;
        }).catch(error => {
          if (error.response.status === 422) {
            //Unprocessable Entity (validation failed)
            self.setState(Object.assign(self.state, {
              showValidationErrors: true,
              validationErrors: error.response.data.data
            }));
          }
        });
      }
    }
  };

  diffMinutes(dt2, dt1) {
    var diff = (dt2.getTime() - dt1.getTime()) / 1000;
    diff /= 60;
    return Math.abs(Math.round(diff));
  }

  handlePrev(state) {
    let self = state;
    const { stepIndex } = self.state;
    if (stepIndex > 0) {
      self.setState(Object.assign(self.state, { stepIndex: stepIndex - 1 }));
    }
  };

  handleChange(value, state) {
    let self = state
    self.setState(Object.assign(self.state, {
      rideTypeValue: parseInt(value.target.defaultValue)
    }));
  };

  handleProvider(value, state) {
    let self = state;
    console.log(value);
    self.setState(Object.assign(self.state, {
      providerID: value.value,
      providerName: value.text
    }));
  };

  handleDate(event, date, state) {
    let self = state
    let visitTime = new Date(Math.round((date.getTime() + (1 * 60 * 60 * 1000)) / roundingTime) * roundingTime);
    let visitDate = date;
    let pickupTime = new Date(Math.round((visitTime.getTime() - (0.5 * 60 * 60 * 1000)) / roundingTime) * roundingTime);
    let pickupTimeReturn = new Date(Math.round((visitTime.getTime() - (0.5 * 60 * 60 * 1000)) / roundingTime) * roundingTime);

    self.setState(Object.assign(self.state, {
      visitDate: visitDate,
      visitTime: visitTime,
      pickupTime: pickupTime,
      pickupTimeReturn: pickupTimeReturn,
    }));
  }

  handleTime(value, date, state) {
    let self = state;
    self.setState(Object.assign(self.state, {
      visitDate: date,
      visitTime: date,
      pickupTime: new Date(date.getTime() - (0.5 * 60 * 60 * 1000)),
      pickupTimeReturn: new Date(date.getTime() - (0.5 * 60 * 60 * 1000)),
    }));
  }

  handlePickupTime(value, date, state) {
    let self = state;
    console.log('Pickup Time', date);
    self.setState(Object.assign(self.state, {
      pickupTime: date,
      pickupTimeReturn: date
    }));
  }

  handlePickupTimeReturn(value, date, state) {
    let self = state;
    self.setState(Object.assign(self.state, {
      return_time: date,
      pickupTimeReturn: date,
      pickupTimeReturnDisplayMode: 'block'
    }));
  }

  handlePickup(value) {
    console.log(value);
    this.setState(Object.assign(this.state, {
      pickupLocation: value.text
    }));
  };

  handleExternalID(e, value, state) {
    let self = state;
    self.setState(Object.assign(self.state, {
      visit_external_id: value
    }));
  }

  handleNotes(e, value, state) {
    let self = state
    self.setState(Object.assign(self.state, {
      notes: value
    }));
  }

  handleChangeVisitType(event, index, value, state) {
    let self = state;

    let trip_type = {
      key: value.selectField,
    }

    // console.log(event, index, value, state);
    // console.log(trip_type);


    self.setState(Object.assign(self.state, { pickupTimeReturnDisplayMode: value.pickupTimeReturnDisplayMode, trip_type: trip_type, pickupTimeHide: value.pickupTimeHide }));
  }

  renderStepActions(step, state) {
    let self = state;
    return (
      <div style={{ margin: '12px 0' }}>
        {step !== 2 && (
          <RaisedButton
            label="Next"
            disableTouchRipple
            disableFocusRipple
            primary
            onTouchTap={() => self.handleNext(self)}
            style={{ marginRight: 12 }}
          />
        )}
        {step === 2 && (
          <RaisedButton
            label="Confirm"
            disableTouchRipple
            disableFocusRipple
            primary
            onTouchTap={() => self.handleNext(self)}
            style={{ marginRight: 12 }}
            href=""
          />
        )}
        {step > 0 && (
          <FlatButton
            label="Back"
            disableTouchRipple
            disableFocusRipple
            onTouchTap={() => self.handlePrev(self)}
          />
        )}
      </div>
    );
  }

  // checkValue = (value) => {
  //   return value === this.state.rideTypeValue;
  // }
  updateCheck() {
    this.setState((oldState) => {
      return {
        checked: !oldState.checked,
      };
    });
  }

  getLocation() {
    var defaultPlace = {
      coords: {
        latitude: 41.851382,
        longitude: -87.675980
      }
    }
    if (navigator.geolocation) {
      // this.setPosition(defaultPlace);
      navigator.geolocation.getCurrentPosition(this.setPosition);
    } else {
      this.setPosition(defaultPlace);
    }
  }

  setPosition(position) {
    localStorage.setItem('position', JSON.stringify({ latitude: position.coords.latitude, longitude: position.coords.longitude }));
  }

  handleProviderChanged(res, state) {
    let self = state;
    let destination = {
      id: res.id,
      name: res.name,
      lat: res.lat,
      lng: res.lng,
      address: res.address
    }
    const name = res.name;

    if (self.state.origin && self.state.origin.lat && self.state.origin.lng) {
      let url = self.state.origin.lat + '/' + self.state.origin.lng + '/' + destination.lat + '/' + destination.lng
      Instance.getRawConn().get('/v1/nemt/rides/eta/' + url).then(function (res) {
        let obj = {
          distance_miles: res.data.cost_estimates[0].estimated_distance_miles,
          duration_seconds: res.data.cost_estimates[0].estimated_duration_seconds,
          formatted_time: self.formatTime(res.data.cost_estimates[0].estimated_duration_seconds),
          showed: true,
        }

        localStorage.setItem('eta', JSON.stringify(obj));
        console.log('ETA Info', obj);
        if (!self.state.eta.showed) {

          self.setState(Object.assign(self.state, {
            message: ('BOOKING...Estimated Distance: ' + obj.distance_miles + ' miles\nEstimated Time: ' + obj.formatted_time),
            open: true,
          }));

        }

        self.setState(Object.assign(self.state, {
          eta: obj,
          buttonProviderText: name,
          providerName: name,
          destination: destination
        }));
      });
    } else {
      self.setState(Object.assign(self.state, {
        buttonProviderText: name,
        providerName: name,
        destination: destination
      }));
    }
  }

  formatTime(sec_num) {
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) { hours = "0" + hours; }
    if (minutes < 10) { minutes = "0" + minutes; }
    if (seconds < 10) { seconds = "0" + seconds; }
    return hours + ':' + minutes + ':' + seconds;
  }

  handlePickupChanged = (res, state) => {
    let origin = {
      id: res.address_uuid ? res.address_uuid : res.id,
      name: res.name,
      lat: res.lat,
      lng: res.lng,
      address: res.address
    }

    const name = res.name;

    if (state.state.destination && state.state.destination.lat && state.state.destination.lng) {
      let url = origin.lat + '/' + origin.lng + '/' + state.state.destination.lat + '/' + state.state.destination.lng
      Instance.getRawConn().get('/v1/nemt/rides/eta/' + url).then(function (res) {
        let obj = {
          distance_miles: res.data.cost_estimates[0].estimated_distance_miles,
          duration_seconds: res.data.cost_estimates[0].estimated_duration_seconds,
          formatted_time: state.formatTime(res.data.cost_estimates[0].estimated_duration_seconds),
          showed: true,
        }

        localStorage.setItem('eta', JSON.stringify(obj));
        if (!state.state.eta.showed) {

          state.setState(Object.assign(state.state, {
            message: ('BOOKING...Estimated Distance: ' + obj.distance_miles + ' miles\nEstimated Time: ' + obj.formatted_time),
            open: true,
          }));

        }

        state.setState(Object.assign(state.state, {
          eta: obj,
          buttonPickupText: name,
          pickupLocation: name,
          origin: origin,
        }));
      });
    } else {
      state.setState(Object.assign(state.state, {
        buttonPickupText: name,
        pickupLocation: name,
        origin: origin
      }));
    }

  }

  handleValidationErrosDialogDismiss() {
    this.setState(Object.assign(this.state, {
      showValidationErrors: false
    }));
  }

  render() {
    // const { stepIndex } = this.state;
    this.getLocation();

    const state = this;
    let userSelection;

    let pickupTimeSelector;
    if (this.state.pickupTimeReturnDisplayMode !== 'none') {
      pickupTimeSelector = (
        <TimePicker
          autoWidth={false}
          style={{ width: 80, display: pickupTimeReturnDisplayMode }}
          format="ampm"
          underlineShow={true}
          hintText="Choose Return Time"
          floatingLabelText="Return Time"
          value={this.state.pickupTimeReturn}
          onChange={(e, d) => this.handlePickupTimeReturn(e, d, this)}
          minutesStep={5}
        />)
    }

    let pickupTime = (<TimePicker
      autoWidth={false}
      style={{ width: 80 }}
      format="ampm"
      underlineShow={true}
      hintText="Choose Pickup Time"
      floatingLabelText="Pickup Time"
      value={this.state.pickupTime}
      onChange={(e, d) => this.handlePickupTime(e, d, this)}
      minutesStep={5}
    />);
    if (this.state.pickupTimeHide) pickupTime = null;

    if (this.state.showUserSelection && this.state.users.length > 0) {
      const handleAutocomplete = (u) => {
        let userHomeAddress = null;
        if (u.addresses && u.addresses.length > 0) {
          u.addresses.forEach(address => {
            if (address.address_type === ADDRESS_TYPE_HOME) {
              userHomeAddress = address;
            }
          });
        }
        if (userHomeAddress != null) {
          userHomeAddress.name = "Home";
          state.handlePickupChanged(userHomeAddress, state);
        }
        state.setState(Object.assign(state.state, { user: u, userSelectionText: u.userdata }));
      }
      const datasourceConfig = { text: 'userdata', value: 'useruuid' }
      userSelection = (
        <div>
          <AutoComplete style={{ fontSize: '10' }} dataSourceConfig={datasourceConfig} dataSource={this.state.users} floatingLabelText="Choose Member" filter={(searchText, key) => (key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1)} maxSearchResults={5} onNewRequest={handleAutocomplete} searchText={this.state.userSelectionText} />
        </div>
      );
    } else if (this.state.showUserSelection && this.state.users.length === 0) {
      userSelection = (<div style={{ fontSize: '10' }} >
        <strong>Loading...</strong>
      </div>);
    } else {
      userSelection = (<div >
        <strong>{this.state.user.member}</strong> - {this.state.user.name}
      </div>);
    }

    return (
      <article className="article padding-sm-v">
        <h2 className="article-title" style={{ paddingTop: 10, margin: 0 }} >Book Ride</h2>
        <div className="box box-default">
          <div className="box-body padding-xs">

            <div style={{ maxWidth: 380, margin: 'auto' }}>
              <ValidationErrorsInfoDialog open={this.state.showValidationErrors} errorMessages={this.state.validationErrors} onDismiss={this.handleValidationErrosDialogDismiss.bind(this)} />

              <Stepper
                activeStep={this.state.stepIndex}
                linear={false}
                orientation="vertical"
              >
                <Step>
                  <StepButton onClick={() => this.setState({ stepIndex: 0 })}>
                    Member
                  </StepButton>
                  <StepContent>
                    <form role="form">
                      <a href="/#/app/page/eligibility" target="_new" >Verify Eligibility</a>
                      <div className="divider" />
                      <strong>OR</strong>

                      {userSelection}
                      <div className="divider" />

                      <NEMTLocation type="flat" floatingLabelText='Choose Member Location' hintText="Choose Member Location" data={this.state} title={"Member Address"} value={""} buttonvalue={this.state.buttonPickupText} onPlaceChanged={(provider) => this.handlePickupChanged(provider, this)} fontSize={12} loadSuggestion={true} address={this.state.origin} />


                      <Checkbox
                        label="Member has consented to terms of use"
                        checked={this.state.checked}
                        onCheck={this.updateCheck.bind(this)}
                        style={styles.checkbox}
                      />

                      <div className="divider" />
                    </form>
                    {this.renderStepActions(0, this)}
                  </StepContent>
                </Step>

                <Step>
                  <StepButton onClick={() => this.setState({ stepIndex: 1 })}>
                    Provider
                  </StepButton>
                  <StepContent>
                    <form role="form">
                      <NEMTLocation type="flat" data={this.state} title={"Provider"} value={""} buttonvalue={this.state.buttonProviderText} onPlaceChanged={(provider) => this.handleProviderChanged(provider, this)} fontSize={12} locationType="provider" loadSuggestion={true} address={this.state.destination} />
                      {/* <div className="divider" /> */}
                    </form>
                    {this.renderStepActions(1, this)}
                  </StepContent>
                </Step>


                <Step>
                  <StepButton onClick={() => this.setState({ stepIndex: 2 })}>
                    Visit Details
                  </StepButton>
                  <StepContent>
                    <form role="form">
                      <div className="form-group">
                        <DatePicker formatDate={new DateTimeFormat('en-US', {
                          weekday: 'short',
                          day: 'numeric',
                          month: 'long',
                          year: 'numeric',
                        }).format} style={{ maxWidth: 80 }} hintText="Visit Date" floatingLabelText="Date" container="inline" onChange={(e, d) => this.handleDate(e, d, this)} shouldDisableDate={disableWeekends} value={this.state.visitDate} />
                        <TimePicker
                          style={{ maxWidth: 80 }}
                          format="ampm"
                          hintText="Visit Time"
                          floatingLabelText="Time"
                          value={this.state.visitTime}
                          onChange={(e, d) => this.handleTime(e, d, this)}
                          minutesStep={5}
                        />
                      </div>
                      <div className="divider" />
                      <div className="form-group">
                        <TextField hintText="Visit External ID" floatingLabelText="External ID" onChange={(e, v) => this.handleExternalID(e, v, this)} value={this.state.visit_external_id} />
                      </div>
                    </form>


                    {/* <TabsSection /> */}
                    {this.renderStepActions(1, this)}
                  </StepContent>
                </Step>

                <Step>
                  <StepButton onClick={() => this.setState({ stepIndex: 3 })}>
                    Trip Details
                  </StepButton>
                  <StepContent>
                    {/* <Paper zDepth={7}> */}
                    <form>

                      <SelectFieldExampleSimple handleChange={(e, i, v) => this.handleChangeVisitType(e, i, v, this)} value={this.state.trip_type.key} />
                      {pickupTime}
                      {pickupTimeSelector}
                      <SelectFieldExampleMultiSelect />
                      <DialogExampleDialogDatePicker />
                      <TextField
                        underlineShow={true}
                        hintText="Notes for Driver"
                        floatingLabelText="Notes for Driver"
                        onChange={(e, v) => this.handleNotes(e, v, this)}
                        value={this.state.notes} multiLine={true}
                        maxlength={250}
                        rows={1}
                      />


                      {/* <Divider /> */}

                    </form>

                    {/* </Paper> */}
                    {this.renderStepActions(2, this)}
                  </StepContent>
                </Step>
              </Stepper>
            </div>

            <div style={{ maxWidth: 380, margin: 'auto' }}>
              <div className="divider divider-xl" />
              <div className="callout callout-info">
                <p>Complete steps <strong>1 - 4</strong> to schedule your ride!</p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <Snackbar
            style={{ fontSize: '7' }}
            open={this.state.open}
            message={this.state.message}
            // message="Booking Ride"
            autoHideDuration={50000}
            onRequestClose={() => this.handleRequestClose(this)}
          />

        </div>
      </article>
    );
  }
}

export default VerticalNonLinear;
