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 { FormWithConstraints } from 'react-form-with-constraints';


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


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

/*
<div className="Modal Modal-mask modal_repower Modal--save isOpen">
      <div className="Modal-wrapper">
      <div className="Modal-container" >
*/
class ContactModal 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){
    if(this.state.valid_email&&this.state.name!==""&&this.state.privacy)
    {
      this.props.showModal('CONTACT_CONFIRM')
    }
  }


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

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

    
  }


  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(){
    
    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> Non hai ancora una fornitura energetica attiva?</h3>
          </div>
          <FormWithConstraints ref={formWithConstraints => this.form = formWithConstraints}
                           onSubmit={this.handleSubmit} noValidate>
          <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">
            
              <div class="wapper-input__modale">
                <label for="">Nome o ragione sociale</label>
                <input type="text"
                pattern="^(?!\s*$).+"
                onChange={this.handleChange} 
                className='modal-name' 
                name='name' 
                value={this.state.name} 
                placeholder="Nome o ragione sociale" />

                  {this.state.valid_name && this.state.name!=='' &&

                  <div className="validationIcon validationIconName">
                    <img src={greenCheck} alt=""/>
                  </div>
                  }

                  {!this.state.valid_name && this.state.name!=='' &&

                  <div className="validationIcon validationIconName">
                    <img src={alertError} alt=""/>
                  </div>
                  }
              </div>
           
              <div class="wapper-input__modale">
                <label for="">Email o numero di telefono</label>
                <input type="email"
                
                pattern="^[A-Za-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                onChange={this.handleChange} 
                className='modal-mail' 
                name='email' 
                value={this.state.email} 
                placeholder="Email" />

                {this.state.valid_email && this.state.email!=='' && 

                  <div className="validationIcon validationIcon__mail ">
                    <img src={greenCheck} alt=""/>
                  </div>
                }

                {!this.state.valid_email && this.state.email!=='' &&

                <div className="validationIcon validationIcon__mail">
                  <img src={alertError} alt=""/>
                </div>
                }
                
              </div>
             
            </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.state.privacy}/>

                          <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={!(this.state.valid_email&&this.state.name!==''&&this.state.privacy)
              ? "btn btn__gray":"btn btn__red"} onClick={() => this.handleSubmit()}>
              Invia
            </button>

          </div>
        </FormWithConstraints>
        
        </ReactModal>
      )
  }
}

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

const mapDispatchToProps = dispatch => ({
  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)),
});

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