var base_url = "https://api.football-data.org/v2/competitions/2021/matches";

function fetchWithToken(url){
  return fetch(url, {
    headers: {
      'X-Auth-Token': '9e44af272fc541e9ac7da576257957f0'
    }
  })
}

// Blok kode yang akan di panggil jika fetch berhasil
function status(response) {
  if (response.status !== 200) {
    console.log("Error : " + response.status);
    // Method reject() akan membuat blok catch terpanggil
    return Promise.reject(new Error(response.statusText));
  } else {
    // Mengubah suatu objek menjadi Promise agar bisa "di-then-kan"
    return Promise.resolve(response);
  }
}

// Blok kode untuk memparsing json menjadi array JavaScript
function json(response) {
  return response.json();
}

// Blok kode untuk meng-handle kesalahan di blok catch
function error(error) {
  // Parameter error berasal dari Promise.reject()
  console.log("Error : " + error);
}

// Blok kode untuk melakukan request data json
function getArticles() {
  if ("caches" in window) {
    caches.match(base_url).then(function(response) {
      if (response) {
        response.json().then(function(data) {
          var articlesHTML = "";
          data.matches.forEach(function(article) {
            articlesHTML += `
                  <div class="card">
                    <table class="highlight centered">
                      <thead>
                        <tr>
                            <th>Home</th>
                            <th>Away</th>
                            <th>Home Score</th>
                            <th>Away Score</th>
                            <th>Match Day</th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr>
                          <td>${article.homeTeam.name}</td>
                          <td>${article.awayTeam.name}</td>
                          <td>${article.score.fullTime.homeTeam}</td>
                          <td>${article.score.fullTime.awayTeam}</td>
                          <td>${article.season.currentMatchday}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                `;
          });
          // Sisipkan komponen card ke dalam elemen dengan id #content
          document.getElementById("articles").innerHTML = articlesHTML;
        });
      }
    });
  }

  fetchWithToken(base_url)
    .then(status)
    .then(json)
    .then(function(data) {
      // Objek/array JavaScript dari response.json() masuk lewat data.

      // Menyusun komponen card artikel secara dinamis
      var articlesHTML = "";
      data.matches.forEach(function(article) {
        articlesHTML += `
              <div class="card">
                    <table class="highlight centered">
                      <thead>
                        <tr>
                            <th>Home</th>
                            <th>Away</th>
                            <th>Home Score</th>
                            <th>Away Score</th>
                            <th>Match Day</th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr>
                          <td>${article.homeTeam.name}</td>
                          <td>${article.awayTeam.name}</td>
                          <td>${article.score.fullTime.homeTeam}</td>
                          <td>${article.score.fullTime.awayTeam}</td>
                          <td>${article.season.currentMatchday}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
            `;
      });
      // Sisipkan komponen card ke dalam elemen dengan id #content
      document.getElementById("articles").innerHTML = articlesHTML;
    })
    .catch(error);
}

function getArticleById() {
  // Ambil nilai query parameter (?id=)
  var urlParams = new URLSearchParams(window.location.search);
  var idParam = urlParams.get("id");

  if ("caches" in window) {
    caches.match(base_url + idParam).then(function(response) {
      if (response) {
        response.json().then(function(data) {
          var articleHTML = `
            <div class="card">
                    <table class="highlight centered">
                      <thead>
                        <tr>
                            <th>Home</th>
                            <th>Away</th>
                            <th>Home Score</th>
                            <th>Away Score</th>
                            <th>Match Day</th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr>
                          <td>${article.homeTeam.name}</td>
                          <td>${article.awayTeam.name}</td>
                          <td>${article.score.fullTime.homeTeam}</td>
                          <td>${article.score.fullTime.awayTeam}</td>
                          <td>${article.season.currentMatchday}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
          `;
          // Sisipkan komponen card ke dalam elemen dengan id #content
          document.getElementById("body-content").innerHTML = standingsHTML;
        });
      }
    });
  }

  fetchWithToken(base_url + idParam)
    .then(status)
    .then(json)
    .then(function(data) {
      // Objek JavaScript dari response.json() masuk lewat variabel data.
      console.log(data);
      // Menyusun komponen card artikel secara dinamis
      var articleHTML = `
          <div class="card">
                    <table class="highlight centered">
                      <thead>
                        <tr>
                            <th>Home</th>
                            <th>Away</th>
                            <th>Home Score</th>
                            <th>Away Score</th>
                            <th>Match Day</th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr>
                          <td>${article.homeTeam.name}</td>
                          <td>${article.awayTeam.name}</td>
                          <td>${article.score.fullTime.homeTeam}</td>
                          <td>${article.score.fullTime.awayTeam}</td>
                          <td>${article.season.currentMatchday}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
        `;
      // Sisipkan komponen card ke dalam elemen dengan id #content
      document.getElementById("body-content").innerHTML = standingsHTML;
    });
}