import React,{Component,useState,useEffect} from 'react';
import { Modal,Button,Form } from 'react-bootstrap';

function ModalReferred({state,updateState,get}){
  const [showModal,setShowmodal] = useState(false);
  const [nombre,setNombre] = useState('');
  const [correo,setCorreo] = useState('');
  const [telefono,setTelefono] = useState('');
  const [sendForm,setSendForm] = useState(false);

  useEffect( () => {
    if(!get('app_id_s')){
      existRegistroPartner()
    }
  },[])

  return(
    <Modal 
    show={showModal}
    backdrop="static"
    keyboard={false}
    >
      <Modal.Header style={{backgroundColor:'#ff0350',color:'#fff'}}>
        <Modal.Title><h5 style={{marginBottom:'0px',lineHeight:'1.5'}}>Completa los siguientes datos</h5></Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <Form id="frmReferido">
          <Form.Group className="mb-3" controlId="formNombre">
            <Form.Label>Nombre</Form.Label>
            <Form.Control type="text" placeholder="" 
            onChange={ 
              (e) => { 
                setNombre(e.target.value)
              } 
            } 
            />
          </Form.Group>
          <Form.Group className="mb-3" controlId="formCorreo">
            <Form.Label>Correo</Form.Label>
            <Form.Control type="email" placeholder="" 
            onChange={ 
              (e) => { 
                setCorreo(e.target.value)
              } 
            }
            />
          </Form.Group>
          <Form.Group className="mb-3" controlId="formTelefono">
            <Form.Label>Teléfono</Form.Label>
            <Form.Control type="text" placeholder="" 
            onChange={ 
              (e) => { 
                setTelefono(e.target.value) 
              } 
            }
            />
          </Form.Group>
        </Form>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" style={{backgroundColor:'#ff0350',color:'#fff',marginRight:'0px',borderColor:'#ff0350'}}
        disabled={(sendForm) ? true : false}
        onClick={
          (e) => {
            setSendForm(true)
            sendPreForm()
          }
        }
        >
          Enviar Datos
        </Button>
      </Modal.Footer>
    </Modal>
  )

  function existRegistroPartner(){
    var formData = new FormData();
    formData.append('tarjeta', 'plus');
    fetch('https://tarjeta.id/partners/REST/Controller.php?opt=existRegistroPartner',{
      method: "POST",
      mode: "cors",
      body: formData
    })
    .then( response => response.json() )
    .then( data => {
      if(data.exist == '1'){
        setShowmodal(true)
      } 
    })
  }

  function sendPreForm(){
    const valNombre = nombre.trim();
    const valCorreo = correo.trim();
    const valTelefono = telefono.trim();

    if(valNombre.length>0 && valCorreo.length>0 && valTelefono.length>0){
      var formData = new FormData();
      formData.append('nombre', valNombre);
      formData.append('correo', valCorreo);
      formData.append('telefono', valTelefono);
      formData.append('tarjeta', 'plus');
      fetch('https://tarjeta.id/partners/REST/Controller.php?opt=saveInfoPreTarjeta',{
        method: 'POST',
        mode: "cors",
        body: formData 
      })
      .then(response => response.json())
      .catch(error => console.error('Error:', error))
      .then(response => {
          if(response.status=='ok'){
            console.log('close modal')
            setShowmodal(false);
          }
      });
    }else{
      setSendForm(false);
      alert("Completa los campos requeridos")
    }

  }
}

export {
  ModalReferred
}