Repower / Repower_CHosoWebApi

import React, { Component } from 'react'
import ReactModal from 'react-modal';

import greenCheck from '../../img/outlineGreenCheck.svg'
import alertError from '../../img/alert_error.svg'

import * as SelectActionCreators from '../actions/profilationSelect'
import { connect } from 'react-redux';


import trainerIcon from './img/trainer-icons.svg'

import ModalValidatingInput from './ModalValidatingInput'

/*
<div className="Modal Modal-mask modal_repower Modal--save isOpen">
      <div className="Modal-wrapper">
      <div className="Modal-container" >
*/
class TrainerModal extends Component {


  constructor(props) {
    super(props);

    this.state = {
      valid_email:false,
      valid_name:false,
      email:'',
      name:'',
      privacy:false,
     
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleCheckbox = this.handleCheckbox.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleSubmit(e){
    //this.props.hideModal()

    const modal='trainerModal'
    if(/^\d+$/.test(this.props.modalContacts[modal].contact.value)){
      this.props.updateActivation(3,'holderPhone',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].holderPhone.required

      })
      this.props.updateActivation(3,'referentPhone',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].referentPhone.required

      })
    }
    
    if(/^[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/.test(this.props.modalContacts[modal].contact.value)){
      this.props.updateActivation(3,'holderMail',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].holderMail.required

      })
      this.props.updateActivation(3,'referentMail',{
        value:this.props.modalContacts[modal].contact.value,
        valid:true,
        required:this.props.activationSteps[3].referentMail.required

      })
      this.props.updateActivation(2,'emailIntestatario',{
          value:this.props.modalContacts[modal].contact.value,
          valid:true,
          ignore:this.props.activationSteps[2].emailIntestatario.ignore

      })
    }

    this.props.showModal('CONTACT_CONFIRM')
  }


  handleCheckbox(e){
    
   
   /* const checkbox= !this.state.privacy

   console.log(checkbox)
    
    this.setState({
      ...this.state,
      privacy: checkbox,
      
    });*/

    this.props.updateModalValues('trainerModal','privacy',{
      value:!this.props.modalContacts.trainerModal.privacy.value,
      valid:!this.props.modalContacts.trainerModal.privacy.valid,
      required:true
    })

    
  }


  handleChange(e) {
    const target = e.currentTarget;
   
    
   console.log(e.target.value,e.target.validity.valid)
   
    
    
    
    this.setState({
      ...this.state,
      [target.name]: target.value,
      ['valid_'+target.name]:e.target.validity.valid,
      
      
    });

    
    
  }

  render(){
    const modal='trainerModal'
   var complete=true;
    
    for (var property in this.props.modalContacts[modal]) {
            if ( this.props.modalContacts[modal].hasOwnProperty(property)) {

             
              //console.log('check this modal',this.props.modalContacts[modal][property])
                complete=complete&&( this.props.modalContacts[modal][property].valid|| !this.props.modalContacts[modal][property].required)
              
         }

    }
    return(
      <ReactModal
          isOpen={true}
          onRequestClose={() => this.props.hideModal()}
          portalClassName='modal modal-mask modal_repower modal_repower__contact isOpen'
          overlayClassName='modal-wrapper'
          className='modal-container'
        >

          
        
          <div className="close_modal" onClick={() => this.props.hideModal()}><img src="https://d33wubrfki0l68.cloudfront.net/c0553300c767c895ee4900759828af6476c3e9e9/55953/img/closed_modal.svg" alt="" /></div>
          
          <div  class=" modal-header">
            <img src={trainerIcon} alt="" />

            <h3>Contatta personal trainer</h3>
          </div>
          
          <div class="modal-body">

          <p class="modal-description">Parliamoci! Un personal trainer dell’energia ti aiuterà a costruire <br />l’offerta giusta in base alle tue necessità.</p>

            <div class="modal-flex">
            
             
                <ModalValidatingInput 
                  allowNonValidInput={false}
                  label={'NOME O RAGIONE SOCIALE'}
                  pattern={"[A-zÀ-ÿ ]*"}
                  name={'name'}
                  placeholder={'Nome o ragione sociale'}
                  modal={'trainerModal'}
                />

                 
           
               <ModalValidatingInput 
                  allowNonValidInput={false}
                  label={'EMAIL O NUMERO DI TELEFONO'}
                  pattern={"(^[A-Za-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$)||([0-9]{10,})"}
                  name={'contact'}
                  placeholder={'Email o telefono'}
                  modal={'trainerModal'}
                />
             
            </div>
          </div>
          <div class="modal-footer">
            <div class="wapper-input__modale wapper-input__modalePrivacy">
                        <p>
                            <input class="privacy" name="privacy" id="privacy" type="checkbox" onChange={this.handleCheckbox} value={this.props.modalContacts.trainerModal.privacy.value} checked={!!this.props.modalContacts.trainerModal.privacy.value}/>

                          <label htmlFor="privacy"><span className="isCheckbox"></span>   Confermo di aver preso visione <span className=" triggher_modal privacy-modal-link" onClick={() => this.props.showModal('PRIVACY_MODAL')}>dell’informativa sulla privacy</span></label>
                        </p>
            </div>
            <button className={!(complete)
              ? "btn btn__gray no-events":"btn btn__red"} onClick={() => this.handleSubmit()}>
              Invia
            </button>

          </div>
        
        
        </ReactModal>
      )
  }
}

const mapStateToProps = state => {
  return {
    activationSteps: state.ProfilationSelectReducer.activationSteps,
    modalContacts: state.ProfilationSelectReducer.modalContacts,
  steps:state.ProfilationSelectReducer.steps,
  solutions:state.ProfilationSelectReducer.solutions,
  modalOpen:state.ProfilationSelectReducer.modalOpen
}};

const mapDispatchToProps = dispatch => ({
  updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
  updatePropValue: (prop,value,index,complete) => 
    dispatch(SelectActionCreators.changeValue(prop,value,index,complete)),
  updateStoreValue: (prop,value) => 
    dispatch(SelectActionCreators.changeProp(prop,value)),
    hideModal: () => 
    dispatch(SelectActionCreators.hideModal()),
    showModal: (modalName) => 
    dispatch(SelectActionCreators.showModal(modalName)),
    updateModalValues: (modal,field,value) => dispatch(SelectActionCreators.updateModalValues(modal,field,value)),
});

export default connect(mapStateToProps, mapDispatchToProps)(TrainerModal);