const people = [
  { name: 'Bob', last: 'Johnson', age: 30 },
  { name: 'Charlie', last: 'Brown', age: 25 },
  { name: 'David', last: 'Williams', age: 35 },
  { name: 'Alice', last: 'Smith', age: 28 },
  { name: 'Eve', last: 'Davis', age: 22 },
  { name: 'Frank', last: 'Miller', age: 40 },
];

const buttonName = document.getElementById('sort-by-name');
const buttonLast = document.getElementById('sort-by-last');
const buttonAge = document.getElementById('sort-by-age');

// Helpers
const pipe =
  (...functions) =>
  (value) => {
    return functions.reduce((acc, fn) => fn(acc), value);
  };

const render = (listItems) => {
  const ul = document.getElementById('people-list');
  ul.innerHTML = listItems.join('');
};

// Exercise helpers

const peopleToString = (people) => {
  return people.map((p) => `${p.name} ${p.last} (${p.age})`);
};

const peopleToListItems = (strings) => strings.map((str) => `<li>${str}</li>`);

const compareByName = (a, b) => a.name.localeCompare(b.name);
const compareByLast = (a, b) => a.last.localeCompare(b.last);
const compareByAge = (a, b) => a.age - b.age;

const sortPeopleBy = /* ... PLACEHOLDER ... */ () => {};

// Main

const byname = /* ... PLACEHOLDER ... */ undefined;

const bylast = /* ... PLACEHOLDER ... */ undefined;

const byage = /* ... PLACEHOLDER ... */ undefined;

byname(people);
buttonName.addEventListener('click', () => undefined);
buttonLast.addEventListener('click', () => undefined);
buttonAge.addEventListener('click', () => undefined);