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 displayJobs = job => {
  const jobsListHtml =  job.map(job => {
  const name = job.name
  const location = job.location.text
  const company = job.tags.filter(tag => tag.name === 'company')[0] && 
          job.tags.filter(tag => tag.name === 'company')[0].value || '';
  const category = job.tags.filter(tag => tag.name === 'category')[0] && 
          job.tags.filter(tag => tag.name === 'category')[0].value || '';
  const type = job.tags.filter(tag => tag.name === 'type')[0] && 
          job.tags.filter(tag => tag.name === 'type')[0].value || '';
  const score = job.score ? Math.min(Math.round(job.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" key={job.key}>
        <div class="content">
          <div class="info">
            <div class="info__company">
              ${company}
            </div>
            <div class="head-wrapper">
              <div class="info__title">
                ${name} 
              </div>
            <span style="background:${scoreColor}" class="score">${score}%</span>
            </div>
            <div class="info__details">
              <span class="details__item">
                <i class="icon fa fa-map-marker-alt"></i>
                ${location}
              </span>
              <span class="details__item">
                <i class="icon fa fa-briefcase"></i>
                ${category}
              </span>
              <span class="details__item">
                <i class="fa fa-file-alt"></i>
                ${type}
              </span>
            </div>
            <div class="skills">
              ${job.skills.map(skill => {
                return (`<span key=${skill.name} class="skills__item">
                          ${skill.name}
                         </span>`
                        )
                  }).join(' ')
                }
             </div>
            </div>
          </div>
        </div>`
    )
  }).join(' ');
  const appElmt = document.getElementById('jobs');
  appElmt.innerHTML = jobsListHtml
}

const query = {
   board_keys: ['3eaf4da328a8c794fb806e6fb839688d8b3f536e'],
   tags_included: [[], []],
   name: "",
   limit: 20,
   page: 1,
   sort_by: 'scoring',
   order_by: 'desc',
   location_distance: 30,
   location_geopoint: {},
   use_agent: 1,
   totalPage : 0,
   profile_key: "9002208426691cfc4cd6b78af629d7d89dbcdb52",
   status: true,
   agent_key: "e4be1cd4ef930181e48b7a190be493cdbab614b3",
   source_key: "2f84e28455330602bdbb927c96450384f3b9241f"
 }

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

axiosHrflow.get(url)
  .then( res => {
    const jobs = res.data.data.jobs;
    const  scores = res.data.data.predictions;
    jobs.forEach( (job, index) => {
      if (scores.length === jobs.length) {
        job.score = scores[index][1];
      }
    });
  const fetchedJobs = { 
    jobs: jobs,
    meta: res.data.meta
  }
   displayJobs(fetchedJobs.jobs);
}).catch( err => {
  console.log('error', JSON.stringify(err))
});