import './App.css';
import { jsPDF } from "jspdf";
import React from 'react';
import './App.css';
import Telefono from './assets/images/telefono.png';
import Mail from './assets/images/email.png';
import Map from './assets/images/map.png';
// import $ from "jquery";

function App () {

  const previsualizacionPdf = () => {
    // Objeto jsPDF para utilizar los metodos de la libreria inicializado con los sig. args
    // p : Hoja vertical
    // pt: medicion en puntos de la hoja  
    // letter: Tipo de papel a utilizar carta
    var pdf = new jsPDF('p', 'pt', 'letter');

    // --------- Configuracion del PDF -----------
    var margin = 10; // Margin que se le dara en todos los lados del pdf
    // Scala nos permitira que la info de la pagina este ajustada al papel
    // le asignamos el ancho interno del HTML. Este calculo contempla el html con su margin
    var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;
    pdf.html(document.getElementById("curriculum"), {
			x: margin,  
      y: margin, 
      html2canvas: {   
        scale: scale,  // Aqui le asignamos la escala con la que se ajustara el html  
      },
      callback: function(pdf){

        var iframe = document.createElement('iframe');
				iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
				document.getElementById("curriculum").appendChild(iframe);
				iframe.src = pdf.output('datauristring');
      }
    	});
  }


  const generarPdf  = () => {
    // Utilizamos la misma configuracion PDF que en la funcion "PrevisualizacionPdf"
    var pdf = new jsPDF('p', 'pt', 'letter');
    var margin = 5; 
    var scale = (pdf.internal.pageSize.width - margin * 2) / document.body.scrollWidth;

    pdf.html(document.getElementById("curriculum"), {
			x: margin,
      y: margin,
      html2canvas: {
        scale: scale, 
      },
      callback: function(pdf){
        // Utilizamos el metodo save para descargar el pdf y le asignamos un nombre 
        pdf.save("curriculum.pdf");
      }
    });
  }

  return(
    <div className='father-container'>
      
      <div id='curriculum'>
        
      {/* Section Cabezera */}
      <div className="curriculum-container">

        <div className="nameImage-container">

            <div className="mainPersonalInfo-Container">
                <div className="name">
                    <h2>
                        Nahuel Mereles Rodriguez
                    </h2>    
                </div>
                
                <div className="mini-info-Container">
                    <div>
                      <div>
                        <img src={Mail} alt="correo electronico" />
                      </div>
                        
                        <p>
                            nahuelmereles1@gmail.com
                        </p>
                    </div>

                    <div>
                      <div>
                        <img src={Telefono} alt="correo electronico" />
                      </div>

                        <p>
                            +595 0991265189
                        </p>
                    </div>


                    <div>
                      <div>
                        <img src={Map} alt="correo electronico" />
                      </div>

                        <p>
                        Barrio San Marcos - Limpio
                        </p>
                    </div>
                </div>
            
            </div>

            <div className="image-container">
                <img className="img-fluid" src="https://secure.gravatar.com/avatar/2235f28530b4eca9077774c5f39eceb4?s=125&d=mm&r=g" alt="Foto de perfil" />
            </div>

            </div>

          <div>

        </div>

        <div className='container-col'>
        
        <div className='left-column'>
          <div>
            <div className='perfil-container'>
              <h3>
                Perfil  
              </h3>

              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis facilis unde nesciunt ut dolor quidem ipsa architecto illo, molestias dolorum deserunt odit itaque, eum accusamus ea ipsam voluptatem nobis maxime.
                Labore vero repellat aspernatur beatae voluptatem? 
                </p>
            </div>

            <div className='formacion-container mt-3'>
              <h3 className='mt-3'>
                Formacion
              </h3>

              <div className='d-flex justify-content-between'>
                <p className='negrita'>
                  Ingenieria Informatica
                </p>

                <p>
                  mar 2022 - presente
                </p>
              </div>

              <p>
                Universidad Americana, Asuncion, Paraguay
              </p>
              
            </div>

            <div className='cursos-container mt-3'>
              <h3 className='mt-3'>
                Cursos
              </h3>
              
              <div className='d-flex justify-content-between mt-3'>
                <p className='negrita'>
                  Full Stack Web Developer
                </p>

                <p>
                  mar 2021 - presente
                </p>
              </div>

              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, quaerat quo dolor tempore beatae dignissimos quasi quia sint id.
              </p>

              <div className='d-flex justify-content-between mt-3'>
                <p className='negrita'>
                  Bootcamp Java
                </p>

                <p>
                  abril 2022 - presente
                </p>
              </div>

              <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, quaerat quo dolor tempore beatae dignissimos quasi quia sint id.
              </p>

            </div>

          </div>
        </div>
      
        <div className='right-column'>
          <div>
            <div className='datosPersonales-container'>
              <h3>
                Datos Personales
              </h3>

              <p className='colorcito'>
                Fecha de Nacimiento
              </p>
              <p>
                4 de agosto de 2001
              </p>

              <p className='mt-2 colorcito'>
                Lugar de Nacimiento
              </p>
              <p>
                Argentina, Buenos Aires
              </p>

              <p className='mt-2 colorcito'>
                Sitio Web
              </p>
              <p>
                https://brave-ride-e0d05f.netlify.app/
              </p>

              <p className='mt-2 colorcito'>
                Linkedin
              </p>
              <p>
                @NAHUELMERELESRORIGUEZ
              </p>

            </div>
              
            <div className='competencias-container mt-3'>
              <h3 className='mt-3'>
                Competencias
              </h3>

              <p className='mt-2'>
                  Javascript Vanilla
              </p>
              <div className='barraEntera'>
                <div className='barraMedia'>
                  <p>.</p>
                </div>
              </div>
              
              <p>
                  React Js
              </p>
              <div className='barraEntera'>
                <div className='barraAlta'>
                  <p>.</p>
                </div>
              </div>

              <p>
                  Java
              </p>
              <div className='barraEntera'>
                <div className='barraBaja'>
                  <p>.</p>
                </div>
              </div>

            </div>
          </div>
        </div>
        
      </div>
      

      </div>

    {/* Secciones Principales */}

      </div>

     
      <button onClick={ previsualizacionPdf }>
        Previsualizacion del Pdf
      </button>

      <button onClick={ generarPdf }>
        Generar Pdf
      </button>

     

    </div>
  )

}

export default App;