const players = [
  {
    id: 'x9Opl1',
    name: 'Mario',
    bio: 'Italian plumber and lead character',
  },
  {
    id: '7fGlZ0',
    name: 'Luigi',
    bio: "Mario's green younger brother",
  },
  {
    id: 'y0SH11',
    name: 'Yoshi',
    bio: 'Green dinosaur turns enemies into eggs',
  },
  {
    id: 'a8Pxia',
    name: 'Wario',
    bio: "Mario's yellow and purple arch-rival",
  },
];

const app = document.getElementById('app');
app.innerHTML = `
  
JavaScript HTML5 APIs
  
  
class="info">
  "button" class="back">Back
  "button" class="forward">Forward
`;

const info = document.querySelector('.info');
const links = [...document.querySelectorAll('.links a')];
const back = document.querySelector('.back');
const forward = document.querySelector('.forward');

const render = (state) => {
  info.innerHTML = `
    
${state.name}
    
${state.bio}

  `;
};

const pushDefaultState = () => {
  const player = players[0];
  history.replaceState(player, '', player.id);
  render(player);
};

const init = () => {
  if (location.pathname === '/') {
    pushDefaultState();
    return;
  }

  const id = location.pathname.substring(1);
  const player = players.find((player) => player.id === id);

  render(player);
};

back.addEventListener('click', () => history.go(-1));
forward.addEventListener('click', () => history.go(1));

links.forEach((link) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const id = e.target.getAttribute('href').substring(1);
    const player = players.find((player) => player.id === id);

    history.pushState(player, '', player.id);
    render(player);
  });
});

window.addEventListener('popstate', (e) => {
  if (!e.state) {
    pushDefaultState();
    return;
  }

  const player = e.state;
  render(player);
});

if (window.history && window.history.pushState) {
  init();
}