import React, { Component } from 'react';
import FontIcon from 'material-ui/FontIcon';
import { BottomNavigation, BottomNavigationItem } from 'material-ui/BottomNavigation';
import Paper from 'material-ui/Paper';
import IconLocationOn from 'material-ui/svg-icons/communication/location-on';
import Websocket from 'react-websocket';
import Dialog from 'material-ui/Dialog';
import Instance from '../../../../../../../components/Connection';

const recentsIcon = <FontIcon className="material-icons">mode_edit</FontIcon>;
const favoritesIcon = <FontIcon className="material-icons">favorite</FontIcon>;
const nearbyIcon = <FontIcon className="material-icons">sms</FontIcon>;
const cancelIcon = <FontIcon className="material-icons">cancel</FontIcon>;
const locationItem = <FontIcon className="material-icons">room</FontIcon>;

/**
 * A simple example of `BottomNavigation`, with three labels and icons
 * provided. The selected `BottomNavigationItem` is determined by application
 * state (for instance, by the URL).
 */
class BottomNavigationExampleSimple extends Component {
  constructor(props) {
    super(props);
    this.props = props;
  }

  state = {
    stepIndex: 0,
    rideTypeValue: 0,
    providerID: 0,
    providerName: '',
    visitDate: null,
    visitTime: null,
    pickupLocation: null,
    pickupTime: null,
    origin: {},
    destination: {},
    selectedIndex: 0,
    showConfirm: true,
    messageNumber: null,
    message: '',
    ride: {}
  };

  componentWillReceiveProps(nextProps) {
    let data = nextProps.data;
    data.visitDate = data.visitDate ? new Date(data.visitDate) : new Date();
    data.visitTime = data.visitTime ? new Date(data.visitTime) : new Date();
    data.pickupTime = data.pickupTime ? new Date(data.pickupTime) : new Date();
    data.ride = nextProps.params;

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

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

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

  select = index => this.setState(Object.assign(this.state, { selectedIndex: index }));

  style = {
    position: "absolute",
    bottom: "55px",
    width: "340px",
    opacity: '.85',
    borderRadius: '20px'
  }

  handleWebsocket(data) {
    console.log(data);
  }

  handleCancel = (e) => {
    e.preventDefault();
    const state = this;
    if (state.props.data !== undefined) {
      state.setState(Object.assign(state.state, state.props.data));
    }
    if (state.state.showConfirm) {
      if (confirm('Are you sure you want to Cancel this ride?')) {
        state.setState(Object.assign(state.state, { showConfirm: false }));
        let rideID = state.state.ride.ride_uuid;
        let url = '/v1/nemt/rides/' + rideID + '/cancel'
        Instance.getRawConn().post(url).then(function (res) {
          state.setState(Object.assign(state.state, { showConfirm: true }));

          alert('NEMT ride #' + state.state.ride.internal_id + ' has been cancelled');

          window.location.href = '/#/app/table/rides';
        }).catch(function (err) {
          state.setState(Object.assign(state.state, { showConfirm: true }));
          alert('Error: ' + JSON.stringify(res));
          console.log(err);
        });
      }
    }
  }

  handleETA = (e) => {
    e.preventDefault()
    const state = this;
    if (state.props.data !== undefined) {
      state.setState(Object.assign(state.state, state.props.data));
    }

    if (state.state.eta) {
      let rideID = state.state.ride.ride_uuid;
      let message = 'Estimated Distance : ' + state.state.eta.distance_miles + ' miles\nEstimated Time: ' + state.state.eta.formatted_time

      let url = '/v1/nemt/rides/' + rideID + '/message';
      url = encodeURI(url);
      Instance.getRawConn().post(url, { message: message }).then(function (res) {
        alert('ETA Sent');
      }).catch(function (err) {
        console.error(err);
      });
    }
  }

  handleMessage = (e) => {
    e.preventDefault();
    const state = this;
    if (state.props.data !== undefined) {
      state.setState(Object.assign(state.state, state.props.data));
    }

    let rideID = state.state.ride.ride_uuid;
    let message = prompt('Message to member?');
    if (message && message.length > 0) {
      let url = '/v1/nemt/rides/' + rideID + '/message';
      url = encodeURI(url);
      Instance.getRawConn().post(url, { message: message }).then(function (res) {
        alert('Message sent to member');
      }).catch(function (err) {
        console.error(err);
      });
    }
  }

  render() {
    return (

      <Paper zDepth={1} style={this.style}>
        <div>

          <Dialog
            title="Login Error"
            modal={false}
            open={false}
          >
            import Dialog from 'material-ui/Dialog';
        </Dialog>
        </div>
        <BottomNavigation selectedIndex={this.state.selectedIndex}>

          <BottomNavigationItem
            label="Member"
            icon={nearbyIcon}
            onClick={(e) => {
              e.preventDefault();
              this.select(2);
              this.handleMessage(e);
            }
            }
          />
          <BottomNavigationItem
            label="Send ETA"
            icon={locationItem}
            onClick={(e) => {
              e.preventDefault();
              this.select(3);
              this.handleETA(e);
            }
            }
          />
          <BottomNavigationItem
            label="Cancel Ride"
            icon={cancelIcon}
            onClick={(e) => {
              e.preventDefault();
              this.select(1);
              this.handleCancel(e);
            }
            }
          />
        </BottomNavigation>

        {/* <div className="col-md-12" style={{ backgroundColor: 'white', margin: '0px', padding: '0px', opacity: .9, bordertRadius: '0px' }}>
            <div className="box box-default" style={{ backgroundColor: 'white', position: 'relative', marginBottom: '2px', padding: '0px', opacity: .95, borderTopRightRadius: '20px', borderBottomRightRadius: '20px' }}>
              <div className="box-body" style={{ opacity: .9, 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={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'dotted', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Passenger</th>
                        <th style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'dotted', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Status</th>
                        <th style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'dotted', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}></th>
                        <th style={{ borderColor: '#212121', borderWidth: '1px', borderRadius: '12px', borderStyle: 'dotted', paddingLeft: '4px', paddingRight: '4px', fontSize: '10px' }}>Vehicle</th>
                      </tr>
                    </thead>
                    <tbody>
                      {this.carInfo}
                    </tbody>
                  </table>
                </div>

              </div>
            </div>
          </div> */}
      </Paper>
    );
  }
}

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

  state = {
    stepIndex: 0,
    rideTypeValue: 0,
    providerID: 0,
    providerName: '',
    visitDate: null,
    visitTime: null,
    pickupLocation: null,
    pickupTime: null,
    origin: {},
    destination: {},
    selectedIndex: 0,
    ride: {},
  };

  componentWillReceiveProps(nextProps) {
    let data = nextProps.data;
    data.visitDate = data.visitDate ? new Date(data.visitDate) : new Date();
    data.visitTime = data.visitTime ? new Date(data.visitTime) : new Date();
    data.pickupTime = data.pickupTime ? new Date(data.pickupTime) : new Date();
    data.ride = nextProps.params;

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

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

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

  render() {
    return (<BottomNavigationExampleSimple data={this.state} params={this.state.ride} />)
  }
};

export default BottomNavigationSection;
