import React, { Component } from "react";
import { withRouter, } from "react-router-dom";
import { Row, Col, } from 'react-bootstrap'
import Modal from 'react-modal'

class ModalsPreviewPage extends Component {
  constructor(props) {
    super(props);
    this.state = {  }
  }

  componentDidMount() {

  }

  render() {
  	const { isOpenModal, titleModal } = this.props.previewState
  	const { arrDatos, primaryColor, isOpenModalRegisterTarjeta, username, } = 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: '50%',left: '50%',right: 'auto',bottom: 'auto',marginRight: '-50%',transform: 'translate(-50%, -50%)',width: '50%',height: '50%',}
      };
    }



  	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.previewSetState({isOpenModalRegisterTarjeta: false}) }}
          style={customStyles}
          contentLabel="Registrar tarjeta"
        >
          <div className={'disenoPage__colorSugModal'} style={{textAlign:'center'}}>
            <h5>Activa tu tarjeta id</h5>
            <p>Montar imagen</p>
            <p>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>

            <input type={'text'} placeholder={'juan'}
              onChange={ (event) => { this.props.initsetState({ username: event.target.value }) } }
            />
            <hr />

            <button onClick={() => { this.addTarjeta() }}>Registrar</button>

          </div>
        </Modal>

        
      </>
  	)
  }

  addTarjeta() {

    fetch(`https://tarjeta.id/editor_plus/REST/controllers/ControllerTarjeta?opt=existTarjeta`, {
      method: "POST",
      mode: "cors",
      body: JSON.stringify( this.props.initState ),
    })
    .then(res => res.json())
    .then((res) => {

      if(res.exist === 1) {
        alert('Lo sentimos, esta tarjeta ya está ocupada.')
      } else if (res.exist === 0) {
        fetch(`https://tarjeta.id/editor_plus/REST/controllers/ControllerTarjeta?opt=addTarjeta`, {
          method: "POST",
          mode: "cors",
          body: JSON.stringify( this.props.initState ),
        })
        .then(res => res.json())
        .then((res) => {
          //Redireccionar
          alert('Tarjeta registrada con éxito')
          this.props.initsetState({ isOpenModalRegisterTarjeta: false, })
          // window.location = `https://tarjeta.id/${this.props.initState.username}`
        })
      }

    })
  }

  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
  }

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

};

export default withRouter(ModalsPreviewPage)