/* 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);