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 = `
  <h1>JavaScript HTML5 APIs</h1>
  <nav class="links">
    ${players.map((player) => `<a href="/${player.id}">${player.name}</a>`)}
  
 
</nav>
  <div class="info"></div>
  <button type="button" class="back">Back</button>
  <button type="button" class="forward">Forward</button>
`;

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 = `
    <h3>${state.name}</h3>
    <p>${state.bio}</p>
  `;
};

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();
}