const API_KEY = "16d85bf702974259b17e4dff4faeade4";
const BASE_URL = "https://api.football-data.org/v2/";

const LEAGUE_ID = 2021;

const ENDPOINT_COMPETITION = `${BASE_URL}competitions/${LEAGUE_ID}/standings`;
const endpoint_team = `${BASE_URL}/v2/teams/${LEAGUE_ID}`;

const fetchAPI = url => {
    return fetch(url, {
        headers: {
            'X-Auth-Token': API_KEY
        }
    })
        .then(res => {
            if (res.status !== 200) {
                console.log("Error: " + res.status);
                return Promise.reject(new Error(res.statusText))
            } else {
                return Promise.resolve(res)
            }
        })
        .then(res => res.json())
        .catch(err => {
            console.log(err)
        })
};

function getAllStandings() {
    if ("caches" in window) {
        caches.match(ENDPOINT_COMPETITION).then(function (response) {
            if (response) {
                response.json().then(function (data) {
                    console.log("Competition Data: " + data);
                    showStanding(data);
                })
            }
        })
    }

    fetchAPI(ENDPOINT_COMPETITION)
        .then(data => {
            showStanding(data);
        })
        .catch(error => {
            console.log(error)
        })
}

function showStanding(data) {
    let standings = "";
    let standingElement =  document.getElementById("homeStandings");

    data.standings[0].table.forEach(function (standing) {
        standings += `
                <tr>
                    <td><img src="${standing.team.crestUrl.replace(/^http:\/\//i, 'https://')}" width="30px" alt="badge"/></td>
                    <td>${standing.team.name}</td>
                    <td>${standing.won}</td>
                    <td>${standing.draw}</td>
                    <td>${standing.lost}</td>
                    <td>${standing.points}</td>
                    <td>${standing.goalsFor}</td>
                    <td>${standing.goalsAgainst}</td>
                    <td>${standing.goalDifference}</td>
                </tr>
        `;
    });

     standingElement.innerHTML = `
                <div class="card" style="padding-left: 24px; padding-right: 24px; margin-top: 30px;">

                <table class="striped responsive-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Team Name</th>
                            <th>W</th>
                            <th>D</th>
                            <th>L</th>
                            <th>P</th>
                            <th>GF</th>
                            <th>GA</th>
                            <th>GD</th>
                        </tr>
                     </thead>
                    <tbody id="standings">
                        ${standings}
                    </tbody>
                </table>

                </div>
    `;
}

    function getAllTeam() {
        if ("caches" in window) {
            caches.match(endpoint_team).then(function (response) {
                if (response) {
                    response.json().then(function (data1) {
                        console.log("team: " + data1);
                        showTeam(data1);
                    })
                }
            })
        }

        fetchAPI(endpoint_team)
            .then(data1 => {
                showTeam(data1);
            })
            .catch(error => {
                console.log(error)
            })
    }

    function showTeam (data1) {
        let teams = "";
    let teamElement = document.getElementById("teams");

    data.teams.forEach(function (team) {
        teams += `
                <a href="./detail.html?id=${team.id}" style="color:black;">
                    <div class="col s12 m4 l3" style="float: left; height: 40rem; margin: 0; padding: 5px; ">
                        <div class="card">
                            <div class="card-image" style="height : 15rem;">
                            <img src="${team.crestUrl}" style="margin: auto; padding: 1rem 1rem 0 1rem; height: 100%; width:auto; max-width: 100%; ">
                            </div>
                            <div class="card-content" style="padding-top: 0.5rem; height : 6rem;">
                            <h5><strong>${team.name}</strong></h5>
                            </div>
                            <div class="card-action">
                            <a href="./detail.html?id=${team.id}" style="float: left; ">Read More</a>
                            </div>
                        </div>
                    </div>
                </a>
                `;
    });

    teamElement.innerHTML = `
        <div class="row">
        ${teams}
        </div>
    `;
    }