"use strict";const collapHeader=document.querySelectorAll(".js-collapsable"),collapBox=document.querySelectorAll(".collapsable__box"),collapArrow=document.querySelectorAll(".js-collapsable-arrow");for(let e=0;e<collapHeader.length;e++)collapHeader[e].addEventListener("click",handleCollap);function handleCollap(e){const t=e.currentTarget.parentNode,l=document.querySelectorAll(".collapsable");for(let e=0;e<l.length;e++)t===l[e]?collapBox[e].classList.toggle("js-collapsable-close"):collapBox[e].classList.add("js-collapsable-close");for(let e=0;e<collapArrow.length;e++)t===l[e]?collapArrow[e].classList.toggle("js-collapsable-arrow"):collapBox[e].classList.add("js-collapsable-arrow")}const formElement=document.querySelector(".js-submit");function handleSubmit(e){e.preventDefault()}function handleIntro(e){if(13==e.which)return e.preventDefault(),!1}formElement.addEventListener("submit",handleSubmit),formElement.addEventListener("keydown",handleIntro);const inputsTextConfig=[{inputClass:".js-input-name",cardClass:".js-card-name",defaultValue:"Nombre apellidos",cardPrefix:"",cardElementAttribute:"innerHTML"},{inputClass:".js-input-job",cardClass:".js-card-job",defaultValue:"Programadora front end",cardPrefix:"",cardElementAttribute:"innerHTML"},{inputClass:".js-input-email",cardClass:".js-card-email",defaultValue:"",cardPrefix:"mailto:",cardElementAttribute:"href"},{inputClass:".js-input-phone",cardClass:".js-card-phone",defaultValue:"",cardPrefix:"",cardElementAttribute:"href"},{inputClass:".js-input-linkedin",cardClass:".js-card-linkedin",defaultValue:"",cardPrefix:"https://www.linkedin.com/in/",cardElementAttribute:"href"},{inputClass:".js-input-github",cardClass:".js-card-github",defaultValue:"",cardPrefix:"https://www.github.com/",cardElementAttribute:"href"}];function updateAllInputs(){for(const e of inputsTextConfig){const t=document.querySelector(e.inputClass),l=document.querySelector(e.cardClass);let a=t.value;"innerHTML"===e.cardElementAttribute?(a=""===t.value?e.defaultValue:t.value,l.innerHTML=a):"href"===e.cardElementAttribute&&(""===t.value?a="#":(a=a.replace(e.cardPrefix,""),a=e.cardPrefix+a),l.href=a)}saveInLocalStorage()}const inputTextElements=document.querySelectorAll(".js-input-text");for(const e of inputTextElements)e.addEventListener("keyup",updateAllInputs);const paletteElements=document.querySelectorAll(".js-palette"),cardElement=document.querySelector(".js-card"),typoElements=document.querySelectorAll(".js-typo");function updatePalette(){cardElement.classList.remove("palette-1","palette-2","palette-3");const e=document.querySelector(".js-palette:checked").value;cardElement.classList.add("palette-"+e),saveInLocalStorage()}for(const e of paletteElements)e.addEventListener("change",updatePalette);function updateTypo(){cardElement.classList.remove("typography-1","typography-2","typography-3");const e=document.querySelector(".js-typo:checked").value;cardElement.classList.add("typography-"+e),console.log(e),saveInLocalStorage()}for(const e of typoElements)e.addEventListener("change",updateTypo);const fr=new FileReader,uploadBtn=document.querySelector(".js__profile-trigger"),fileField=document.querySelector(".js__profile-upload-btn"),profileImage=document.querySelector(".js__profile-image"),profilePreview=document.querySelector(".js__profile-preview");let photo="";function getImage(e){const t=e.currentTarget.files[0];fr.addEventListener("load",writeImage),fr.readAsDataURL(t)}function writeImage(){photo=fr.result,updatePhoto(),saveInLocalStorage()}function updatePhoto(){const e=photo||"https://media.giphy.com/media/pH7zVFpsSU1mkk7cLV/giphy.gif";profilePreview.style.backgroundImage=`url(${e})`,profileImage.setAttribute("src",e)}function fakeFileClick(){fileField.click()}function getUserData(){return{photo:photo,typo:document.querySelector(".js-typo:checked").value,palette:parseInt(document.querySelector(".js-palette:checked").value),name:document.querySelector(".js-input-name").value,job:document.querySelector(".js-input-job").value,email:document.querySelector(".js-input-email").value,phone:document.querySelector(".js-input-phone").value,linkedin:document.querySelector(".js-input-linkedin").value,github:document.querySelector(".js-input-github").value}}function saveInLocalStorage(){const e=getUserData(),t=JSON.stringify(e);localStorage.setItem("userData",t)}function getFromLocalStorage(){const e=localStorage.getItem("userData");if(null!==e){const t=JSON.parse(e);document.querySelector(".js-input-name").value=t.name,document.querySelector(".js-input-job").value=t.job,document.querySelector(".js-input-email").value=t.email,document.querySelector(".js-input-phone").value=t.phone,document.querySelector(".js-input-linkedin").value=t.linkedin,document.querySelector(".js-input-github").value=t.github,photo=t.photo;const l=document.querySelectorAll(".js-palette");for(const e of l)e.value===t.palette&&(e.checked=!0);const a=document.querySelectorAll(".js-typo");for(const e of a)e.value===t.typo&&(e.checked=!0);updateAllInputs(),updatePalette(),updatePhoto(),updateTypo()}}uploadBtn.addEventListener("click",fakeFileClick),fileField.addEventListener("change",getImage);const resetElement=document.querySelector(".js-reset");function handleReset(){localStorage.clear()}resetElement.addEventListener("click",handleReset);const createBtn=document.querySelector(".js-create-btn"),cardResultElement=document.querySelector(".js-card-result"),urlShareElement=document.querySelector(".js-share__link"),shareContainer=document.querySelector(".js-share__container"),createBtnContainer=document.querySelector(".js-createbtn-container");function handleCreateBtn(e){e.preventDefault(),console.log("Mis datos",getUserData());const t=getUserData();fetch("https://profileawesome.herokuapp.com/card",{method:"POST",body:JSON.stringify(t),headers:{"Content-Type":"application/json"}}).then(e=>e.json()).then(e=>{console.log("Server response:",e),!0===e.success?(cardResultElement.innerHTML=e.cardURL,urlShareElement.innerHTML=e.cardURL,shareContainer.classList.remove("hidden"),createBtnContainer.classList.remove("collapsable__share"),createBtnContainer.classList.add("collapsable__share--clicked"),createBtn.disable=!0):(cardResultElement.innerHTML=e.error,urlShareElement.innerHTML="ERROR. No se ha podido crear la tarjeta")})}createBtn.addEventListener("click",handleCreateBtn);const twitterElement=document.querySelector(".js-twitter-btn"),twitterLinkElement=document.querySelector(".js-twitter-link");function handleTwitterShare(e){twitterLinkElement.href="https://twitter.com/intent/tweet?text=Aquí%20tienes%20mi%20nueva%20tarjeta%20"+urlShareElement.innerHTML}twitterElement.addEventListener("click",handleTwitterShare),getFromLocalStorage(),updateAllInputs(),updatePalette(),updatePhoto(),updateTypo(),handleReset();