const axiosHrflow = axios.create({
  baseURL: 'https://api.hrflow.ai/v1',
  headers: {
    'X-API-KEY': 'askr_07106bbd5bc856f7e9656e0ee652cfc4'
  }
});

const  buildQueryString =  (url, queryObject) => {
  let queryString = `${url}?`;
  Object.keys(queryObject).forEach(item => {
  if (typeof queryObject[item] === 'string'
      || queryObject[item] instanceof String) {
    queryString += `${item}=${queryObject[item]}&`;
  } else {
    queryString += `${item}=${JSON.stringify(queryObject[item])}&`;
  }
});
    return queryString; 
}

const displayProfiles = profiles => {
 const profilesListHtml =  profiles.map(profile => {
 const name = profile.info.full_name
            const location = profile.info.location.text
            const summary = profile.info.summary
            const type = profile.tags.filter(tag => tag.name === 'type')[0].value
            const category = profile.tags.filter(tag => tag.name === 'category')[0].value
            const workingFrom = profile.tags.filter(tag => tag.name === 'working-type')[0].value
            const linkedin = profile.info.urls.linkedin
            const instagram = profile.info.urls.instagram
            const twitter = profile.info.urls.twitter
            const position = profile.experiences[0].title
    return (
      `<div class="card profile" key=${profile.key}>
         <h3>${name}</h3>
         <div class="info">
          <div>worked as ${type}</div>
          <div>
            ${position}
            <span class="text-light"> (${category})</span>
          </div>
         <div>
            ${location}
            <span class="text-light"> (open to ${workingFrom})</span>
         </div>
        </div>
        <div class="urls">
          <a href=${linkedin} target="_blank" class="url"}>
            <i class="fab fa-linkedin icon"></i>Linkedin
          </a>
          <a href=${instagram} target="_blank" class="url">
            <i class="fab fa-instagram icon"></i>Instagram
          </a>
        </div>
        <div>
          <i class="fa fa-star icon"></i><span>${summary}</span>
        </div>
      </div>
      `
    )
  }).join(' ');
  const appElmt = document.getElementById('profiles');
  appElmt.innerHTML = profilesListHtml
}

const query = {
  job_key: "",
  source_keys: ["2f84e28455330602bdbb927c96450384f3b9241f"],
  stage: 'new',
  sort_by: 'created_at',
  order_by: 'desc',
  limit: 10,
  page: 1,
  location_distance: 30,
  location_geopoint: {},
  use_agent: 0,
  text_keywords: [],
  tags_included: [[]],
 }

 const url = buildQueryString('profiles/searching', query);

axiosHrflow.get(url)
  .then( res => {
  const fetchedProfiles = { 
    profiles: res.data.data.profiles,
    meta: res.data.meta
  }
  displayProfiles(fetchedProfiles.profiles);
}).catch( err => {
  console.log('error', err)
});