/**
 * Created by epotignano on 15/4/16.
 */

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Formsy from 'formsy-react';
import MenuItem from 'material-ui/lib/menus/menu-item';
import { FormsyText, FormsySelect } from 'formsy-material-ui';
import { ConfirmAppointment } from '../actions/Appointments';
import { getPatientByEmail, selectPatient, patientSelectModal, fillPatientData} from '../actions/PatientsActions';
import PatientsModal from '../components/PatientsModal';
import PatientCard from '../components/PatientCard';

class Checkout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      openPatientModal : false
    }
  }

  openModal() {
    const { dispatch } = this.props;
    dispatch(patientSelectModal())
  }

  submitAppointment(data) {
    const { dispatch, appointment } = this.props;
    const { keep } = appointment;
    //TODO Transformations for adapt the object to the DTO for Appointments
    dispatch(ConfirmAppointment({
      solicitante : data,
      turno: keep.appointment,
      location: keep.appointment.location,
      doctor: keep.appointment.doctor
    }));
  }

  enableButton() {
    this.setState({
      canSubmit: true
    });
  }

  disableButton() {
    this.setState({
      canSubmit: false
    });
  }

  checkUser(userEmail) {
    const { dispatch } = this.props;
    dispatch(getPatientByEmail(userEmail));
  }

  reOpenPatientsModal(){
    const { dispatch } = this.props;
    dispatch(patientSelectModal())
  }

  reRenderForm() {
    const { dispatch } = this.props;
    dispatch(fillPatientData())
  }

  render() {

    const { appointment, patients } = this.props;
    const { keep } = appointment;
    let _modal = (this.state.openPatientModal) ? <PatientsModal patientsList={patients.patient}/> : null;
    let _form = (
      <Formsy.Form ref="appointmentForm" className="ui large form"
                   onValid={this.enableButton.bind(this)}
                   onInvalid={this.disableButton.bind(this)}
                   onValidSubmit={this.submitAppointment.bind(this)}
      >
        <div className="row ui">
          <div className="ui one column grid">
            <div className="ui column">

              <FormsyText
                name='email_particular'
                hintText="Email"
                required
                value=""
                onChange={(e, value) => this.checkUser(value)}
              />
            </div>
            <div className="ui column">
              <FormsyText
                name='nombre'
                hintText="Nombre"
                required
                value=""
              />
            </div>

            <div className="ui column">
              <FormsyText
                name='apellido'
                hintText="Apellido"
                required
                value=""
              />
            </div>
            <div className="ui column">
              <FormsySelect
                name="sexo"
                required
                floatingLabelText="Sexo"
                menuItems={this.selectFieldItems}
              >
                <MenuItem value={'M'} primaryText="Masculino" />
                <MenuItem value={'F'} primaryText="Femenino" />
              </FormsySelect>
            </div>
            <div className="ui column">
              <FormsyText
                name='numero_tel_celular'
                hintText="Número de teléfono"
                required
                value=""
              />
            </div>
            <div className="ui column">
              <FormsyText
                name='note'
                hintText="Notas"
                value=""
              />
            </div>

          </div>
          <div className="column">
            <button type="submit" className="ui button fluid blue">
              Solicitar cita
            </button>
          </div>
        </div>
      </Formsy.Form>);

    let _changePatientButton = (patients.patient && patients.patient.length > 1) ? (<button onClick={this.reOpenPatientsModal.bind(this)}>
        Cambiar paciente
    </button>) : null;

    let _selectedPatientCard = (
      <div>
        <div className="ui two columns grid">
          <div className="column">
            <PatientCard patient={patients.selectedPatient}/>
          </div>
          <div className="column">
            {_changePatientButton}
            <button onClick={this.reRenderForm.bind(this)}>
              Cambiar email
            </button>
          </div>
        </div>

        <div className="ui column">
          <button onClick={() => this.submitAppointment(patients.selectedPatient)} className="ui button fluid blue">
            Solicitar cita
          </button>
        </div>
      </div>
    );

    var _render = (patients.selectedPatient) ? _selectedPatientCard : _form;

    return (
      <div className="ui one column grid">
        <div className="ui one column grid segment">
          <div className="ui column">
            <div>
              Fecha: {keep.appointment.fecha_hora_inicio.format("dddd DD MMMM YYYY")}
            </div>
            <div>
              Horario: {keep.appointment.fecha_hora_inicio.format("HH:mm")}
            </div>
            <div>
              Duración: { keep.appointment.duracion_en_minutos} minutos
            </div>
          </div>
        </div>

        <div className="ui one column grid segment">
          { _render }
          <PatientsModal patientsList={patients.patient}/>
        </div>
      </div>
    )
  }

}

function mapStateToProps(state) {
  const { appointment, patients } = state;
  return {
    appointment,
    patients
  }
}

Checkout.propTypes = {
  dispatch : PropTypes.any
}

Checkout.contextTypes = {
  store: PropTypes.any
};

Checkout.stateTypes = {
  keep: PropTypes.any,
  doctor: PropTypes.any
};

export default connect(mapStateToProps)(Checkout);

@@ -573,16 +573,370 @@
 Card';%0A%0A
+Formsy.addValidationRule('isRequiredIfNotValue', function (values, value, otherField) %7B%0A  // The this context points to an object containing the values%0A  // %7BchildAge: %22%22, parentAge: %225%22%7D%0A  // otherField argument is from the validations rule (%22childAge%22)%0A  console.log(values%5BotherField%5D);%0A%0A  if(value %7C%7C values%5BotherField%5D) %7B%0A    return true;%0A  %7D%0A%0A%7D);%0A%0A
 class Ch
@@ -3836,16 +3836,24 @@
 tel%C3%A9fono
+ celular
 %22%0A      
@@ -3866,40 +3866,362 @@
     
-required%0A                value=%22
+validations=%22isRequiredIfNotValue:numero_tel_particular%22%0A                value=%22%22%0A              /%3E%0A            %3C/div%3E%0A            %3Cdiv className=%22ui column%22%3E%0A              %3CFormsyText%0A                name='numero_tel_particular'%0A                hintText=%22N%C3%BAmero de tel%C3%A9fono particular%22%0A                validations=%22isRequiredIfNotValue:numero_tel_celular
 %22%0A  

Add validation for phone numbers