import React from 'react';
import QueueAnim from 'rc-queue-anim';
import Instance from './connection';
const dateformat = require('dateformat');

const formatPhoneNumber = function (s) {
  var s2 = ("" + s).replace(/\D/g, '');
  var m = s2.match(/^(\d{3})(\d{3})(\d{4})$/);
  return (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
}

const Main = (props) => {
  return (
    <div className="row">
      <div className="col-xl-12">
        <Header user={props.user} />
      </div>
      <div className="col-xl-6">
        <ContactInfo user={props.user} />
      </div>
      <div className="col-xl-6">
        <Rides user={props.user} />
      </div>
    </div>
  )
};


const Rides = (props) => {
  let rides = [];
  let list = [];

  if (props.user.rides && props.user.rides !== null && props.user.rides.length > 0) {
    rides = props.user.rides;
    rides.forEach(c => {
      let visit_time = ""
      if (c.visit_time) visit_time = dateformat(new Date(c.visit_time), "mm/dd/yyyy h:MM TT");
      list.push(
        <div className="box" key={c.ride_uuid}>
          <div className="box-body">
            <div className="row">
              <div className="col-xl-6 col-xs-6 col-md-6">
                <span><strong>Pickup:</strong><br /><a href={"/#/app/page/map/" + c.ride_uuid}>{c.route.origin.name}</a></span>
              </div>
              <div className="col-xl-6 col-xs-6 col-md-6">
                <span><strong><a href={"/#/app/page/map/" + c.ride_uuid}>Details...</a></strong></span>
              </div>
              <div className="col-xl-12 col-xs-12 col-md-12">
                <span><strong>Destination:</strong><br /><a href={"/#/app/page/map/" + c.ride_uuid}>{c.route.destination.name}</a></span>
              </div>
              <div className="col-xl-6 col-xs-6 col-md-6">
                <span><strong>Date:</strong><br />{visit_time}</span>
              </div>
              <div className="col-xl-6 col-xs-6 col-md-6">
                <span><strong>Status:</strong><br />{c.status.value}</span>
              </div>
            </div>
          </div>
        </div>);
    }, this);
  }

  return (
    <div className="box box-default">
      <div className="box-body">
        <div className="row">
          <div className="col-xl-12 col-xs-12 col-md-12">
            <div className="box box-transparent">
              <div className="box-body">
                <div className="row metrics">
                  <div className="col-xl-12 col-xs-12 col-md-12">
                    <span className="metric">Rides</span>
                  </div>
                </div>
                {list}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
};

const ContactInfo = (props) => {
  let contact = [];
  let list = [];
  if (props.user.contacts && props.user.contacts !== null && props.user.contacts.length > 0) {
    contact = props.user.contacts;
    contact.forEach(c => {
      let contact = c.contact
      if (c.type.key === 'phone') {
        contact = contact.replace('+1', '');
        contact = formatPhoneNumber(contact);
      }

      list.push(<div className="row metrics" key={c.type.key + c.contact}>
        <div className="col-xl-6 col-xs-6 col-md-6">
          <span className="metric-info">{c.type.value}:</span>
        </div>
        <div className="col-xl-6 col-xs-6 col-md-6">
          <span className="metric-info">{contact}</span>
        </div>
      </div>);
    }, this);
  }

  return (
    <div className="box box-default">
      <div className="box-body">
        <div className="row">
          <div className="col-xl-12 col-xs-12 col-md-12">
            <div className="box box-transparent">
              <div className="box-body">
                <div className="row metrics">
                  <div className="col-xl-12 col-xs-12 col-md-12">
                    <span className="metric">Contact Info</span>
                  </div>
                </div>
                {list}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
};

const Header = (props) => {
  let gender = "Other";
  if (props.user.gender === "M") gender = "Male";
  if (props.user.gender === "F") gender = "Female";

  let birthdate = "";
  if (props.user.birthdate) birthdate = dateformat(new Date(props.user.birthdate), "mm/dd/yyyy");

  let phonenumber = "";
  if (props.user.phonenumber && props.user.phonenumber !== null && props.user.phonenumber !== "") {
    phonenumber = props.user.phonenumber
    phonenumber = phonenumber.replace('+1', '');
    phonenumber = formatPhoneNumber(phonenumber);
  }

  return (
    <div className="box box-default">
      <div className="box-body">
        <div className="row">
          <div className="col-xl-12 col-xs-12 col-md-12">
            <div className="box box-transparent">
              <div className="box-body">
                <div className="row metrics">
                  <div className="col-xl-4 col-xs-4 col-md-4">
                    <span className="metric-info">Member</span>
                    <span className="metric">{props.user.member}</span>
                  </div>
                  <div className="col-xl-4 col-xs-4 col-md-4">
                    <span className="metric-info">Name</span>
                    <span className="metric">{props.user.name}</span>
                  </div>
                  <div className="col-xl-4 col-xs-4 col-md-4">
                    <span className="metric-info">Gender</span>
                    <span className="metric">{gender}</span>
                  </div>
                </div>
                <div className="row metrics">
                  <div className="col-xl-4 col-xs-4 col-md-4">
                    <span className="metric-info">Birth Date</span>
                    <span className="metric">{birthdate}</span>
                  </div>
                  <div className="col-xl-4 col-xs-4 col-md-4">
                    <span className="metric-info">Email</span>
                    <span className="metric">{props.user.email}</span>
                  </div>
                  <div className="col-xl-4 col-xs-4 col-md-4">
                    <span className="metric-info">Phone Number</span>
                    <span className="metric">{phonenumber}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
};

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

  state = {
    user: {
      "useruuid": "",
      "name": "",
      "gender": "",
      "member": "",
      "birthdate": "",
      "email": "",
      "phonenumber": "",
      "profile": "",
      "contacts": [],
      "rides": [],
    }
  }

  componentDidMount() {
    const useruuid = this.props.params.user_uuid;
    Instance.get(`/v1/nemt/users/member/${useruuid}`)
      .then(res => {
        this.setState(Object.assign(this.state, { user: res.data }));
      })
      .catch(err => {
        if (err.response.status === 422) {
          location.href = '/#/app/table/members';
        } else {
          console.error(err);
        }
      });
  }

  render() {
    return (
      <div className="container-fluid no-breadcrumbs page-dashboard">
        <QueueAnim type="bottom" className="ui-animate">
          <Main user={this.state.user} />
        </QueueAnim>
      </div>)
  }
}
module.exports = Member;
