import React, { Component } from "react";
import { withRouter, } from "react-router-dom";
import { Row, Col, } from 'react-bootstrap'
import Modal from 'react-modal'
import axios from 'axios';
// import Lottie from "react-lottie";
import Lottie from 'lottie-react-web'
import animationData from "../../lotties/16701-launch-qualibrate.json";


class ModalsPreviewPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isStopped: false,
      isPaused: false,
    }
  }

  componentDidMount() {

  }

  render() {
  	const { isOpenModal, titleModal } = this.props.previewState
  	const { arrDatos, primaryColor, isOpenModalRegisterTarjeta, isOpenModalUpdateTarjeta, username, textUpload, } = this.props.initState
    const { diseno } = arrDatos
    let customStyles = {}

    if(isOpenModal) {
      customStyles = {
        content : {top: '50%',left: '50%',right: 'auto',bottom: 'auto',marginRight: '-50%',transform: 'translate(-50%, -50%)',width: 'auto',height: 'auto',}
      };
    } else {
      customStyles = {
        content : {top:'0',bottom:'0',right:'0',left:'0',margin:'20px auto',width: '50%',height: 'inherit', overflowX:'hidden',overflowY:'scroll'}
      };
    }



  	return (
      <>
    		<Modal
          overlayClassName="Overlay__aplicaciones"
          isOpen={isOpenModal}
          onRequestClose={() => { this.previewSetState({isOpenModal: false}) }}
          style={customStyles}
          contentLabel="Elegir color"
        >
          <div className={'disenoPage__colorSugModal'} style={{textAlign:'center'}}>
            <h5>{titleModal}</h5>
            <img
  	          style={{width:'90px',height:'90px',objectFit:'cover',borderRadius:'100%'}} 
  	          src={diseno.perfil} 
  	          alt="imagen_perfil"
            />
            <hr />

            { this.makeListArr() }

          </div>
        </Modal>

        <Modal
          overlayClassName="Overlay__aplicaciones"
          isOpen={isOpenModalRegisterTarjeta}
          onRequestClose={() => { this.initsetState({isOpenModalRegisterTarjeta: false}) }}
          contentLabel="Registrar tarjeta"
          className="modal__addTarjeta"
          ariaHideApp={false}
          >

          <div className={'disenoPage__colorSugModal'} style={{textAlign:'center'}}>
            
            <div className={'disenoPage__colorSugModal__header'}>
              <h5 className="col-11 text-center disenoPage__colorSugModal__title">Activa tu tarjeta id</h5>
            </div>

            <div className={'disenoPage__colorSugModal__body'}>
              <img src={'img/icons/Artboard-6.png'} style={{width:'100%'}} />

              {
                textUpload === '' ? (
                  <div className={'disenoPage__colorSugModal__body__text'} >
                    <p style={{marginBottom:20}}>Para activar tu tarjeta ID necesitas registrar un nombre de usuario con el que te identificarás. Te recomendamos que uses un nombre corto y fácil de recordar. Ejemplo: tarjeta.id/mitarjeta.</p>
                    <Row>
                      <Col style={{marginBottom:0}}>
                        <div className="input-group mb-3">
                          <div className="input-group-prepend">
                            <span className="input-group-text" id="basic-addon3">tarjeta.id/</span>
                          </div>
                          <input type={'text'} className="form-control" placeholder={'juan'}
                            onChange={ (event) => { this.props.initsetState({ username: event.target.value }) } }
                          />
                        </div>
                        
                        <small style={{color:'#dc3545',textAlign:'left'}}>Sólo se permiten letras minúsculas y números</small>
                      </Col>
                    </Row>
                    <button style={{marginTop:10}} className="btn btn-primary btn-block ws_finish_button" onClick={() => { this.props.addTarjeta() }}>Registrar</button>
                  </div>
                ) : (
                  <>
                    <Lottie
                      direction={1}
                      options={{
                        animationData: animationData,
                        loop: true,
                      }}
                    />
                    <p>{textUpload}</p>
                  </>
                )
              }
            </div>

          </div>
        </Modal>

        <Modal
          overlayClassName="Overlay__aplicaciones"
          isOpen={isOpenModalUpdateTarjeta}
          onRequestClose={() => { this.initsetState({isOpenModalUpdateTarjeta: false}) }}
          contentLabel="Actualizar tarjeta"
          className="modal__addTarjeta"
          >

          <div className={'disenoPage__colorSugModal'} style={{textAlign:'center'}}>
            <>
              <Lottie
                direction={1}
                options={{
                  animationData: animationData,
                  loop: true,
                }}
              />
              <p>{textUpload}</p>
            </>
          </div>
        </Modal>

        
      </>
  	)
  }

  makeListArr() {
  	const { typeArr, } = this.props.previewState
  	const { arrDatos, primaryColor } = this.props.initState
    const { telefono,whatsapp,email } = arrDatos
    let arr = []

    if(typeArr === 'tel') {
  		arr = telefono.telefono
	  	return (
	  		<div>
	  			{
	  				arr.map((t,e) => (
	  					<>
		  					<p>{t.titulo}</p>
		  					<p>{t.telefono}</p>
		  				</>
	  				))
	  			}
	  		</div>
	  	)
    }

    if(typeArr === 'whats') {
  		arr = whatsapp.whatsapp
	  	return (
	  		<div>
	  			{
	  				arr.map((t,e) => (
	  					<>
		  					<p>{t.titulo}</p>
		  					<p>{t.whatsapp}</p>
		  				</>
	  				))
	  			}
	  		</div>
	  	)
    }
    
    if(typeArr === 'email') {
  		arr = email.email
	  	return (
	  		<div>
	  			{
	  				arr.map((t,e) => (
	  					<>
		  					<p>{t.titulo}</p>
		  					<p>{t.email}</p>
		  				</>
	  				))
	  			}
	  		</div>
	  	)
    }

    return null
  }

  initsetState(param){
    this.props.initsetState(param)
    return true
  }

  previewSetState(param) {
    this.props.previewSetState(param)
    return true
  }



};

export default withRouter(ModalsPreviewPage)