Repower / Repower_CHosoWebApi

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

import idIcon from '../../img/id.svg'
import cfIcon from '../../img/codice_fiscale_icon.svg'

import closeIcon from '../../img/closed_modal.svg'

import data from './data.json'

import Webcam from 'react-webcam';

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

import ZipIcon from '../../img/upload.svg'
import closePrevie from '../../img/remove.svg'

import PDF from 'react-pdf-js';

class CamModal extends Component {
  constructor(props){
    super(props)
    this.state={
      countDown:-1,
      shot:'',
      photos:this.props.activationSteps[this.props.camModalStep][this.props.camModalDocId]!==''? 
        this.props.activationSteps[this.props.camModalStep][this.props.camModalDocId].preview:[],
      prevExt:this.props.activationSteps[this.props.camModalStep][this.props.camModalDocId]!==''? 
        this.props.activationSteps[this.props.camModalStep][this.props.camModalDocId].fileExt:[],
      maxPhotos:this.props.camModalMaxPhotos,
    }

    this.loadPhotos=this.loadPhotos.bind(this)
    this.removePhoto = this.removePhoto.bind(this);
    this.takeAgain = this.takeAgain.bind(this);
    this.confirmPhoto = this.confirmPhoto.bind(this);
    this.takePhoto = this.takePhoto.bind(this);
  }



  takeAgain(){
    this.setState({
      shot:''
    })
  }

  confirmPhoto(){
     var photos=this.state.photos
     var prevExt=this.state.prevExt
     const shot=this.state.shot
    if(photos.length+1>this.state.maxPhotos)
    {
      photos.splice(0,1)
      prevExt.splice(0,1)
    }
    this.setState({

      shot:'',
      photos:[...photos,shot],
      prevExt:[...prevExt,'jpg']
    })
  }

  loadPhotos(){

      var prevToUpload=this.state.photos;
      var extToUpload=this.state.prevExt;
      
    this.props.updateActivation(this.props.camModalStep,this.props.camModalDocId,{
      file:'loadedFile',
      fileExt:extToUpload,
      preview:prevToUpload,
      filename:prevToUpload.length===1? 'Foto caricata':'File caricati'
    })


    this.props.hideModal()

    var complete=true;
      for (var property in this.props.activationSteps[this.props.camModalStep]) {
            if (this.props.activationSteps[this.props.camModalStep].hasOwnProperty(property)) {

             if(property!=='isComplete'&&property!=='isActive' && property!==this.props.camModalDocId){
                complete=complete&&this.props.activationSteps[this.props.camModalStep][property]!==''
              }
         }

      }
    this.props.updateActivation(this.props.camModalStep,'isComplete',complete)
  }

  setRef = (webcam) => {
    this.webcam = webcam;
  }

  capture = () => {
    
    this.setState({
      countDown:3,
      //shot:imageSrc
      
    })

  };

  takePhoto(){
    const imageSrc = this.webcam.getScreenshot();
     this.setState({
      
      shot:imageSrc
      
    })

  }

  removePhoto(index){
    
    this.setState({
      photos:this.state.photos.filter((_, i) => i !== index),
      prevExt:this.state.prevExt.filter((_, i) => i !== index)
    })

    if(this.state.photos.length===1){
      this.props.updateActivation(this.props.camModalStep,this.props.camModalDocId,'')
    }else
    {
      this.props.updateActivation(this.props.camModalStep,this.props.camModalDocId,{
      ...this.props.activationSteps[this.props.camModalStep][this.props.camModalDocId],
      preview:this.state.photos.filter((_, i) => i !== index),
      fileExt:this.state.prevExt.filter((_, i) => i !== index)
    })
    }
    
  }

  render(){

    if(this.state.countDown>-1){
      setTimeout(function(){
        if(this.state.countDown===0)
        this.takePhoto()
        this.setState({
          countDown:this.state.countDown-1
        })

      }.bind(this),1000)
    }
    
    const previews=this.state.photos.map((photo, index) => (

      <div key={index} className="preview-ct">
              <div className="preview">
              <figure className="close-preview" onClick={()=>this.removePhoto(index)}>
                <img src={closePrevie} alt='' />
              </figure>

              {this.state.prevExt[index]==='pdf' && 

                      <PDF file={photo} page={1} />
                }
                {(this.state.prevExt[index]==='jpg' ||  this.state.prevExt[index]==='png') && 
        <div className="wrapper-img-preview"> <img className='img-preview' src={photo} alt=''/></div>

                  }

                  {this.state.prevExt[index]==='zip'&& 
        <div className="wrapper-img-preview zip-file"> <img className='img-preview' src={ZipIcon} alt=''/></div>

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

          
        
          <div className="close_modal" onClick={() => this.props.hideModal()}>
            <img src={closeIcon} alt="" /></div>
             
            { this.state.shot==='' &&
               <div className='cam-modal-canvas'>
               {this.state.countDown>0 &&
                <div className='count-down-container'>
                  <div className='count-down'>
                    <span>{this.state.countDown}</span>
                  </div>
                </div>
               }
                <Webcam ref={this.setRef} audio={false}/>
                {this.state.photos.length<this.state.maxPhotos&&<button className='btn__red' onClick={this.capture}>Scatta una foto</button>}
              </div>
            }

            { this.state.shot!=='' &&
              <div className='cam-modal-canvas has-pic'>
                <img className='cam-pic' src={this.state.shot} alt='' />
                <div className='cam-modal-canvas-button-ct'>
                  <button className='btn__gray' onClick={this.takeAgain}>Scatta di nuovo</button>
                  <button className='btn__red' onClick={this.confirmPhoto}>Usa questa foto</button>
                </div>
              </div>
            }
            
          


          
          <div className='cam-modal-content'>
            <div className='cam-modal-text'>
            <div className="modal-header">
                
                {(this.props.camModalDocId==='idCard_front' || 
                  this.props.camModalDocId==='idCard_back') &&
                    <figure className="viewbox">


               <img src={idIcon} alt="" />  </figure>}
                {(this.props.camModalDocId==='idCard_front' || 
                  this.props.camModalDocId==='idCard_back') &&
                <h3>{data.modalStrings.camModal.id_title}
                      {this.props.camModalDocId==='idCard_front'? (this.props.idSamefile? ' (fronte e retro)':' (fronte)'):' (retro)'}
                </h3>}
                {(this.props.camModalDocId==='cfCard_front' || 
                  this.props.camModalDocId==='cfCard_back') &&
                <figure className="viewbox">

                <img src={cfIcon} alt="" />
                </figure>}
                {(this.props.camModalDocId==='cfCard_front' || 
                  this.props.camModalDocId==='cfCard_back') &&
                <h3>{data.modalStrings.camModal.cf_title}
                  {this.props.camModalDocId==='cfCard_front'? (this.props.cfSamefile? ' (fronte e retro)':' (fronte)'):' (retro)'}
                </h3>}
                {(this.props.camModalDocId==='lightBill' || 
                  this.props.camModalDocId==='gasBill') &&
                <figure className="viewbox">

                <img src={camIcon} alt="" />
                </figure>}
                {(this.props.camModalDocId==='lightBill' || 
                  this.props.camModalDocId==='gasBill') &&
                <h3>{data.modalStrings.camModal.bill_title}</h3>}
              </div>
              
              <div className='modal-body'>
                <p><strong>
                 {data.modalStrings.camModal.snapAdvice_intro}
                </strong>
                </p>
                

            <p className="cam-modal-listing">{data.modalStrings.camModal.advice1}</p>
                <p className="cam-modal-listing">{data.modalStrings.camModal.advice2}</p>
                <p className="cam-modal-listing">{data.modalStrings.camModal.advice3}</p>
                
              </div>
            </div>

            {this.state.photos.length>0 && 
            <div className='cam-modal-previews-container'>
              <p>
                {data.modalStrings.camModal.picturesLoaded}
              </p>
              <div className='cam-modal-previews'>
                {previews}
              </div>
              <button className='btn__gray' onClick={() => this.loadPhotos()}>Completa il caricamento</button>
            </div>
            }

             {this.state.photos.length===0 && 
              <div className='cam-modal-previews-container no-photos'>
              <p>
               {data.modalStrings.camModal.noPictures}
              </p>
             
            </div>
             }

          </div>

        </ReactModal>
      )
  }
}

const mapStateToProps = state => {
  return {
    cfSamefile:state.ProfilationSelectReducer.cfSamefile,
    idSamefile:state.ProfilationSelectReducer.idSamefile,
  activationSteps:state.ProfilationSelectReducer.activationSteps,
  modalOpen:state.ProfilationSelectReducer.modalOpen,
  camModalDocId:state.ProfilationSelectReducer.camModalDocId,
  camModalMaxPhotos:state.ProfilationSelectReducer.camModalMaxPhotos,
  camModalStep:state.ProfilationSelectReducer.camModalStep,
}};

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)),
    updateActivation: (index,prop,value) => dispatch(SelectActionCreators.updateActivation(index,prop,value)),
});

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