<div id="app">
  <div class="profiles" id="profiles">
  </div>
</div>

#app {
  font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'calt' 0;
  overflow-x: hidden;
  background: #eee
}

.profiles {
  width: 50%;
  margin: auto;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.card {
  width: 100%;
  padding: 1.5rem;
  border-radius: 5px;
  transition: all 0.2s cubic-bezier(0.41, 0.094, 0.54, 0.07) 0s;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(238, 238, 238);
    box-shadow: rgba(0, 0, 0, 0.05) 1px 2px 4px;
    backface-visibility: hidden;
    background-color: rgb(255, 255, 255);
    border-image: initial;
    margin-bottom: 1.5rem;
}
.content {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    text-decoration: none;
    color: #000;
    position: relative;
}

.info {
    flex: 1 1 auto;
}


.icon {
    width: 17px;
    height: auto;
    margin-right: 0.5rem;
}

.urls {
    display: flex;
    flex-direction: column;
}

.url {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

.error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-light {
    color: #333333;
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.5;
    font-weight: normal;
}

.icon {
  margin-right: 0.5rem;
}

.score {
  padding: 2px 8px;
  color: white;
  font-size: 15px;
  border-radius: 50px;
  magin-left: 5px;
}

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
  const score = profile.score ? Math.min(Math.round(profile.score * 100, 0), 100) : null;
  let scoreColor = '';
    if (score < 50) {
      scoreColor = '#ff6b6b';
    }
    if (score >= 50 && score < 75) {
      scoreColor = '#ff9f43';
    }
    if (score >= 75) {
      scoreColor = '#1dd1a1';
    }
    return (
      `<div class="card profile" key=${profile.key}>
         <h3>${name} <span style="background:${scoreColor}" class="score">${score}%</span></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: "080ad36348634130bd40e5ce5e20e9f5a04b39f4",
  source_keys: ["2f84e28455330602bdbb927c96450384f3b9241f"],
  stage: 'yes',
  sort_by: 'scoring',
  order_by: 'desc',
  limit: 10,
  page: 1,
  location_distance: 30,
  location_geopoint: {},
  use_agent: 1,
  text_keywords: [],
  tags_included: [[]],
  board_key: "3eaf4da328a8c794fb806e6fb839688d8b3f536e",
  agent_key: "e4be1cd4ef930181e48b7a190be493cdbab614b3"
 }

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

axiosHrflow.get(url)
  .then( res => {
  const  scores = res.data.data.predictions;
  const  profiles = res.data.data.profiles;
  profiles.forEach( (profile, index) => {
      if (scores.length === profiles.length) {
        profile.score = scores[index][1];
      }
    });
  const fetchedProfiles = { 
    profiles: profiles,
    meta: res.data.meta
  }
  displayProfiles(fetchedProfiles.profiles);
}).catch( err => {
  console.log('error', err)
});