const searchForm = document.querySelector('form');
const searchResultDiv = document.querySelector('.search-result')
const APP_ID = '0a67fbc1';
const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';
searchForm.addEventListener('submit', function(event){
  if(document.getElementById('name').value.length === 0){
    alert('한글자 이상 입력해주세요');
    event.preventDefault();
  }
  else if(document.getElementById('name').value.length >= 10){
    alert('검색어가 너무 깁니다');
    event.preventDefault();
  }
  else{
    event.preventDefault();
    searchQuery = event.target.querySelector('input').value;
    fetchAPI();
  }
});
async function fetchAPI(){
  const recipeURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_KEY}`;
  const response = await fetch(recipeURL);
  const data = await response.json();
  boxinfo(data.hits);
  console.log(data);
}
function boxinfo(results){
  let boxsinfo ='';
  results.map(result => {
  const object = {
  	  cal: result.recipe.calories.toFixed(0)
  };
    boxsinfo +=
    `
    <style>
    .item{
      display:flex;
      flex-wrap:wrap;
      margin-left:50px auto;
    }
    .container{
      display:flex;
      flex-wrap:wrap;
      margin-left:50px auto;
    }
    <!--검색결과사진,레시피정보 모두 검색창 옆으로 가게하는거까지는 되었고 2열씩 정렬하려 했는데 2열 정렬 부분이 미완성. 우선 사진 옆으로 정보만 수평으로 뜸-->
    <!--검색결과 뜰 시에 검색창 위치가 바뀌는 문제 있음-->
    </style>
    <div class="item">
      <img src="${result.recipe.image}" alt="">
      <div class="flex-container">
        <h1 class="title">${result.recipe.label}</h1>
        <a href="${result.recipe.url}" target="_blank">View Recipe</a>
        <!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
        <a href="https://www.youtube.com/results?search_query=${result.recipe.label}+home+recipe" target="_blank">View Videos</a>
      </div>
      ${(cal => {
        if (cal >= 2000) {
          return `<p style="color:red">${cal}</p>`;
        }
        else if(cal >= 1000 && cal < 2000){
          return `<p style="color:yellow">${cal}</p>`;
        }
        else {
          return `<p style="color:green">${cal}</p>`;
        }
          })(object.cal)
         }
    </div>
    `
  })
  searchResultDiv.innerHTML = boxsinfo;
}