/*
Author:Murtadha Marzouq
@description: This is the main file that loads all the components
@date: 04/13/2022
*/

/****
 * CREATE THE COMPONENTS AND APPEND THEM TO THE DOM
 ****/

/****
 * LANGUAGE COMPONENTS
 ****/
const LanguagesComponent = () => {
  let html = ''
  for (i in Object.keys(information.Languages)) {
    html += `<ul><li>${information.Languages[i]}</li></ul>`
  }
  return `<h3 id="Languages">  Languages:   </h3>  ${html}`
}

/****
 * P U B L I C A T I O N S C O M P O N E N T
 ****/

const PublicationsComponent = () => {
  let html = ''
  for (i in Object.keys(information.Publications)) {
    html += `<ul><li><a id="publications"  href="${information.Publications[i].url}">${information.Publications[i].name}</a> - ${information.Publications[i].description}</li> </ul>`
  }
  return `<h3 id="Publications"> 📑 Publications:   </h3>  ${html}`
}

/**
 * Objective Component
 */
const ObjectiveComponent = () => {
let html = ''
  for (i in Object.keys(information.Objective)) {
    let objective = information.Objective[i]
    let objectiveComponent = document.createElement('div')
    objectiveComponent.classList.add('objective')
    objectiveComponent.innerHTML += `

      <li id="objective">${objective}</li>
      `
    html += objectiveComponent.outerHTML
  }
  return '<h3 id="Objective">🎯🖊️ Experience:</h3>' + html

}

/****
 * EDUCATION COMPONENT
 ****/
const EducationComponent = () => {
  let html = ''
  for (i in Object.keys(information.Education)) {
    let education = information.Education[i]
    let educationComponent = document.createElement('div')
    educationComponent.classList.add('education')

    educationComponent.innerHTML += `
<ul>
  <li id="degree">${education.degree} <p id="major"> ${education.major}</p></li>
  <li id="institution">${education.institution}</li>
  <li id="year">${education.status} in ${education.year}</li>
  <li id="award">Awarded: ${education.awards}</li>
</ul>
<!--
      <p id="degree">${education.degree} in <p id="major"> ${education.major}</p></p>
      <p id="institution">${education.institution}</p>

      <p id="year" >${education.status} in  ${education.year}</p>
      <p id="award">Awarded: ${education.awards}</p>
    -->
      `
    html += educationComponent.outerHTML
    //document.querySelector("#column-1").appendChild(educationComponent);
  }

  return `<h3 id="Education"> 🌌 🎓 Education:    </h3>  ${html}`
}

const SkillsComponent = () => {
  let Skills =
    `<h3 id="Skills">Skills:</h3>` +
    information.Skills.map((skill) => {
      return `

    <ul>
       <li id="skill">${skill}</li>
     </ul>`
    }).join('')

  return Skills
}

const CertificationComponent = () => {
  let html = ''
  for (i in Object.keys(information.Certification)) {
    let certification = information.Certification[i]
    let certificationComponent = document.createElement('div')
    certificationComponent.classList.add('certification')

    certificationComponent.innerHTML += `
      <a href=${certification.Link} id="cert_link">  <p id="certification">${certification.Certification}</p> </a>
      <p id="date">Certification Year: ${certification.Date}</p>
      <p id="describtion"> ${certification.Describtion}</p>
      `
    html += certificationComponent.outerHTML
  }
  return '<h3 id="Certification"> <span class="section-icon">🧾🧾 </span> Certification:</h3>' + html
}

const ExperienceComponent = () => {
  let html = ''
  for (i in Object.keys(information.Experience)) {
    let experience = information.Experience[i]
    let experienceComponent = document.createElement('div')
    experienceComponent.classList.add('experience')
    experienceComponent.innerHTML += `
    <p id="title">${experience.title}</p>

      <p id="company">${experience.company}</p>
      <p id="location"> <span id="date">${experience.location} | <span id="date"> ${experience.startDate} - ${
      experience.endDate
    }</span></p>
      <p id="Responsibilities"><strong>Responsibilities:</strong> ${experience.Responsibilities.map(
        (responsibility) => {
          return `
        <ul>
          <li id="responsibility">${responsibility}</li>
        </ul>`
        },
      ).join('')}</p>
      `
    html += experienceComponent.outerHTML
  }
  return '<h3 id="Experience">🏢🖥️💽Experience:</h3>' + html
}
const InterestComponent = () => {
  let html = ''
  for (i in Object.keys(information.Interests)) {
    let interest = information.Interests[i]
    let interestComponent = document.createElement('div')
    interestComponent.classList.add('interest')
    interestComponent.innerHTML += `
      <ul>
        <li id="interest">${interest}</li>

      </ul>`
    html += interestComponent.outerHTML
  }

  return '<h3 id="Interests">Interests:</h3>' + html
}

const NavBar = () => {
  let html = `<a  class="phone" id="link"    href="${information.Links['phone']}"}"> (213)-458-4982</a> |`
  html += `<a  class="email}" id="link"    href="${information.Links['email']}"> mmarzouq@uncc.edu </a> |`
  html += `<a  class="Github" id="link"    href="${information.Links['Github']}"> Github </a> |`
  html += `<a  class="website" id="link"    href="${information.Links['website']}"> LinkedIn </a>| `
  html += `<a  class="resume" id="link"    href="${information.Links['resume']}"> Resume</a> `
  html += `<p  class="city" id="city"    href="${information.Links['city']}">Charlotte, NC</p> `

  document.getElementById('header').innerHTML =
    `${html}  ` +
    `<img src=${information.Picture} class="profile_picture" id="profile_picture" alt="Profile Picture"> <h1 id="name">${information.Name}</h1> <div id="navbar" class="links"><divider class="divider" id="divider"></divider> ` 
}
/****
 * @description: This function loads all the components
 * @param: none
 * @return: none
 ****/
const load = () => {
  //Setting up the image
  // Creating Components
  let sections = Object.keys(information)
  let Education = EducationComponent()
  let Objective = ObjectiveComponent()
  let Skills = SkillsComponent()
  let Certification = CertificationComponent()
  let Experience = ExperienceComponent()
  let Interest = InterestComponent()
  let Publications = PublicationsComponent()
  let Languages = LanguagesComponent()


  // Creating Elements for each section
  let Firstcolumn = document.createElement('div')
  let Secondcolumn = document.createElement('div')
  let educatoion = document.createElement('section')
  let objective = document.createElement('section')
  let skills = document.createElement('section')
  let certification = document.createElement('section')
  let experience = document.createElement('section')
  let interest = document.createElement('section')
  let publications = document.createElement('section')
  let languages = document.createElement('section')
  // setting the sections

  educatoion.innerHTML = Education
  objective.innerHTML = Objective
  skills.innerHTML = Skills
  certification.innerHTML = Certification
  experience.innerHTML = Experience
  interest.innerHTML = Interest
  publications.innerHTML = Publications
  languages.innerHTML = Languages
  // Add sections to sectionsArray
  // Firstcolumn.innerHTML =  `<img src=${information.Picture} class="profile_picture" id="profile_picture" alt="Profile Picture">`
  Firstcolumn.appendChild(objective)
  Firstcolumn.appendChild(educatoion)
  Firstcolumn.appendChild(experience)

  Firstcolumn.appendChild(certification)
  Secondcolumn.appendChild(skills)
  Secondcolumn.appendChild(interest)
  Secondcolumn.appendChild(publications)
  Secondcolumn.appendChild(languages)

  // Creating the divider

  let page = Firstcolumn.innerHTML + '  </div> ' + Secondcolumn.outerHTML 
  
  document.querySelector('.resumeText').innerHTML = page
}

var information = {}

window.onload = () => {
  let url;
  if(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' ){
        let host = window.location.hostname
    let port = window.location.port
     url = `http://${host}:${port}/information.json`      
            console.log('THE URL IS LOCAL LINK' + url)

    }else{  
    // make it the remote file
      url = 'https://raw.githubusercontent.com/MurtadhaM/FindASnake/main/information.json';
      console.log('THE URL IS REMOTE LINK' + url)
    }


  fetch(
    url,
  )
    .then((response) => response.json())
    .then((data) => {
      information = data
      NavBar()
      load()
    })
}