<h1>Store locator</h1>
<h2>Service filters</h2>
<aside>
  <form>
    <ul id="filters">
      <li><input type="radio" id="all" name="filter" value="all" checked=""><label for="all">All</label></li>
      <li><input type="radio" id="restaurant" name="filter" value="restaurant"><label for="restaurant">Restaurant</label></li>
      <li><input type="radio" id="caffee" name="filter" value="caffee"><label for="caffee">Caffee</label></li>
      <li><input type="radio" id="shops" name="filter" value="shops"><label for="shops">Shops</label></li>
      <li><input type="radio" id="cinema" name="filter" value="cinema"><label for="cinema">Cinema</label></li>
      <li><input type="radio" id="arcade" name="filter" value="arcade"><label for="arcade">Arcade</label></li>
    </ul>
  </form>
</aside>

<h2>Stores</h2>
<ul id="data"></ul>

* {
  box-sizing: border-box;
}

body {
  padding: 2rem;
}

li {
  margin-bottom: 1rem;
}

label {
  margin-left: 0.5rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* SAMPLE DATA */
const DATA = [
  {
    id: "1",
    name: "Super mega mall",
    address: "Some address 1",
    city: "Super Mega City",
    services: ["restaurant", "caffee", "shops", "cinema", "arcade"]
  },
  {
    id: "2",
    name: "Super cool mall",
    address: "Some address 2",
    city: "Super Cool City",
    services: ["caffee", "shops", "cinema", "arcade"]
  },
  {
    id: "3",
    name: "Super medium mall",
    address: "Some address 3",
    city: "Super Medium City",
    services: ["caffee", "shops", "arcade"]
  },
  {
    id: "4",
    name: "Super small mall",
    address: "Some address 4",
    city: "Small Town",
    services: ["caffee", "shops"]
  },
  {
    id: "5",
    name: "Just shops mall",
    address: "Some address 5",
    city: "Really Small Town",
    services: ["shops"]
  },
  {
    id: "6",
    name: "Party town arcade",
    address: "Some address 6",
    city: "Some Other Town",
    services: ["caffee", "restaurants", "arcade"]
  }
];

 const FILTERS = [
  "all",
  "restaurant",
  "caffee",
  "shops",
  "cinema",
  "arcade"
];

/* PROXY */

const isService = (prop) => FILTERS.includes(prop.toString());

const handleGet = (obj, prop) => {
  if (prop in obj) {
    return Reflect.get(obj, prop);
  }

  if (prop === "all") {
    return obj;
  }

  if (isService(prop)) {
    return obj.filter(({ services }) => services.includes(prop));
  }

  return undefined;
};

const createStoresProxy = (stores) => {
  const proxy = new Proxy(stores, {
    get: handleGet
  });

  return proxy;
};

/* INIT */

const stores = createStoresProxy(DATA);

const dataContainer = document.getElementById("data");

const filterInputs = document.querySelectorAll("#filters input");

filterInputs.forEach((input) => {
  input.addEventListener("click", handleClick);
})

function handleClick(e) {
  const value = e.currentTarget.value;
  
  const filtered = stores[value];
  logData(filtered);
}

/* LOG DATA */

function logData(data) {
dataContainer.innerHTML = "";

  data.forEach(data => {
    const item = document.createElement("li");
    item.innerText = JSON.stringify(data)
    dataContainer.appendChild(item);
  })
} 

logData(stores);