class NHLSchedule extends HTMLElement { 
  constructor() {
    super();
    this._response = undefined;
  }
  
  get loading() {
    return JSON.parse(this.getAttribute("loading"));
  }
  
  set loading(val) {
   this.setAttribute("loading", JSON.stringify(val));
  }
  
  get response() {
    return this._response;
  }
  
  set response(v) {
    this._response = v;
  }
  
  get date() {
    return this.getAttribute('date') || NHLSchedule.currentDate();
  }
    
  async connectedCallback() {
    await this.fetchSchedule();
  }
 
  attributeChangedCallback(property, oldValue, newValue) {
    this.render();
  }
  
  static observedAttributes = ['date', 'loading'];
  
  // Implementation functions
  async fetchSchedule() {
    this.loading = true;
    const url = `https://statsapi.web.nhl.com/api/v1/schedule?date=${this.date}&expand=schedule.linescore`;
    const res = await fetch(url);
    const data = await res.json();

    this.response = data.dates[0];
    this.loading = false;
  }
  
  static currentDate() {
    let today = new Date();
    const offset = today.getTimezoneOffset();
    today = new Date(today.getTime() - (offset * 60 * 1000));
    return today.toISOString().split('T')[0];
  }
  
  static teamData = [
    {
      "id": 1,
      "abbreviation": "NJD",
      "teamName": "Devils",
      "name": "New Jersey Devils"
    },
    {
      "id": 2,
      "abbreviation": "NYI",
      "teamName": "Islanders",
      "name": "New York Islanders"
    },
    {
      "id": 3,
      "abbreviation": "NYR",
      "teamName": "Rangers",
      "name": "New York Rangers"
    },
    {
      "id": 4,
      "abbreviation": "PHI",
      "teamName": "Flyers",
      "name": "Philadelphia Flyers"
    },
    {
      "id": 5,
      "abbreviation": "PIT",
      "teamName": "Penguins",
      "name": "Pittsburgh Penguins"
    },
    {
      "id": 6,
      "abbreviation": "BOS",
      "teamName": "Bruins",
      "name": "Boston Bruins"
    },
    {
      "id": 7,
      "abbreviation": "BUF",
      "teamName": "Sabres",
      "name": "Buffalo Sabres"
    },
    {
      "id": 8,
      "abbreviation": "MTL",
      "teamName": "Canadiens",
      "name": "Montréal Canadiens"
    },
    {
      "id": 9,
      "abbreviation": "OTT",
      "teamName": "Senators",
      "name": "Ottawa Senators"
    },
    {
      "id": 10,
      "abbreviation": "TOR",
      "teamName": "Maple Leafs",
      "name": "Toronto Maple Leafs"
    },
    {
      "id": 12,
      "abbreviation": "CAR",
      "teamName": "Hurricanes",
      "name": "Carolina Hurricanes"
    },
    {
      "id": 13,
      "abbreviation": "FLA",
      "teamName": "Panthers",
      "name": "Florida Panthers"
    },
    {
      "id": 14,
      "abbreviation": "TBL",
      "teamName": "Lightning",
      "name": "Tampa Bay Lightning"
    },
    {
      "id": 15,
      "abbreviation": "WSH",
      "teamName": "Capitals",
      "name": "Washington Capitals"
    },
    {
      "id": 16,
      "abbreviation": "CHI",
      "teamName": "Blackhawks",
      "name": "Chicago Blackhawks"
    },
    {
      "id": 17,
      "abbreviation": "DET",
      "teamName": "Red Wings",
      "name": "Detroit Red Wings"
    },
    {
      "id": 18,
      "abbreviation": "NSH",
      "teamName": "Predators",
      "name": "Nashville Predators"
    },
    {
      "id": 19,
      "abbreviation": "STL",
      "teamName": "Blues",
      "name": "St. Louis Blues"
    },
    {
      "id": 20,
      "abbreviation": "CGY",
      "teamName": "Flames",
      "name": "Calgary Flames"
    },
    {
      "id": 21,
      "abbreviation": "COL",
      "teamName": "Avalanche",
      "name": "Colorado Avalanche"
    },
    {
      "id": 22,
      "abbreviation": "EDM",
      "teamName": "Oilers",
      "name": "Edmonton Oilers"
    },
    {
      "id": 23,
      "abbreviation": "VAN",
      "teamName": "Canucks",
      "name": "Vancouver Canucks"
    },
    {
      "id": 24,
      "abbreviation": "ANA",
      "teamName": "Ducks",
      "name": "Anaheim Ducks"
    },
    {
      "id": 25,
      "abbreviation": "DAL",
      "teamName": "Stars",
      "name": "Dallas Stars"
    },
    {
      "id": 26,
      "abbreviation": "LAK",
      "teamName": "Kings",
      "name": "Los Angeles Kings"
    },
    {
      "id": 28,
      "abbreviation": "SJS",
      "teamName": "Sharks",
      "name": "San Jose Sharks"
    },
    {
      "id": 29,
      "abbreviation": "CBJ",
      "teamName": "Blue Jackets",
      "name": "Columbus Blue Jackets"
    },
    {
      "id": 30,
      "abbreviation": "MIN",
      "teamName": "Wild",
      "name": "Minnesota Wild"
    },
    {
      "id": 52,
      "abbreviation": "WPG",
      "teamName": "Jets",
      "name": "Winnipeg Jets"
    },
    {
      "id": 53,
      "abbreviation": "ARI",
      "teamName": "Coyotes",
      "name": "Arizona Coyotes"
    },
    {
      "id": 54,
      "abbreviation": "VGK",
      "teamName": "Golden Knights",
      "name": "Vegas Golden Knights"
    },
    {
      "id": 55,
      "abbreviation": "SEA",
      "teamName": "Kraken",
      "name": "Seattle Kraken"
    }
  ];
  
  getTeamAbbreviation(teamId) {
    return NHLSchedule.teamData.find(t => t.id === teamId)?.abbreviation ?? teamId;
  }
  
  renderMatchupTeam(team, type) {
    const abbr = this.getTeamAbbreviation(team.id);
    const logoMarkup = `<img src="https://assets.nhle.com/logos/nhl/svg/${abbr}_light.svg" width="16" height="16" />`;
  
    if (type === 'away') {
      return `<span>${team.name}</span>${logoMarkup}`;
    }
    
    return `${logoMarkup}<span>${team.name}</span>`;
  }
  
  render() {
    if (this.loading || !this.response) {
      this.innerHTML = 'Loading...';
    } else {
      const rows = this.response.games.map(game => {
        let score = game.status.detailedState;
        if (game.linescore) {
          const awayTeam = game.linescore.teams.away;
          const homeTeam = game.linescore.teams.home;
          
          if (awayTeam.goals > homeTeam.goals) {
            score = `<b>${this.getTeamAbbreviation(awayTeam.team.id)} ${awayTeam.goals}</b>, ${this.getTeamAbbreviation(homeTeam.team.id)} ${homeTeam.goals}`;
          } else {
            score = `<b>${this.getTeamAbbreviation(homeTeam.team.id)} ${homeTeam.goals}</b>, ${this.getTeamAbbreviation(awayTeam.team.id)} ${awayTeam.goals}`;
          }
        }

        return `
          <tr>
            <td>${this.renderMatchupTeam(game.teams.away.team, 'away')} @ ${this.renderMatchupTeam(game.teams.home.team, 'home')}</td>
            <td>${score}</td>
          </tr>
        `;
      });

      this.innerHTML = `
        <p>Schedule for ${this.date} (${this.response.totalGames} games)</p>
        <table>
          <thead>
            <tr>
              <th>Matchup</th>
              <th>Score</th>
            </tr>
          </thead>
          <tbody>
            ${rows.join('')}
          </tbody>
        </table>
      `;
    }
  }
}

customElements.define('nhl-schedule', NHLSchedule);