let example = [
  {
    number: "123",
    devices: [
      {
        name: "Beamer LG 123456",
        type: "Beamer",
        count: 1,
      },
      {
        name: "Overheadprojektor",
        type: "Overhead",
        count: 3,
      },
    ],
  },
  {
    number: "124",
    devices: [
      {
        name: "Beamer SM 143456",
        type: "Beamer",
        count: 1,
      },
      {
        name: "Overheadprojektor",
        type: "Overhead",
        count: 1,
      },
    ],
  },
  {
    number: "238",
    devices: [
      {
        name: "ZIEH001",
        type: "PC",
        count: 1,
      },
      {
        name: "ZIEH002",
        type: "PC",
        count: 1,
      },
      {
        name: "ZIEH003",
        type: "PC",
        count: 1,
      },
      {
        name: "ZIEH004",
        type: "PC",
        count: 1,
      },
      {
        name: "ZIEH005",
        type: "PC",
        count: 1,
      },
      {
        name: "ZIEH006",
        type: "PC",
        count: 1,
      },
      {
        name: "ZIEH007",
        type: "PC",
        count: 1,
      },
    ],
  },
  {
    number: "254",
    devices: [
      {
        name: "Smartboard",
        type: "Smartboard",
        count: 1,
      },
    ],
  },
];
/*###########################################*/
document.addEventListener("DOMContentLoaded", init);

function init() {
  console.log("loaded");
  registerEventlistener();
  let daten = fetchData({ extend: "all" });
  generateTable(daten);
}

function postData(dataobject) {

}

function fetchData(config) {
  let result = [];
  switch (config.extend) {
    case "all":
      result = example;
      break;
    case "room":
      console.log('To be implemented');
      break;
    default:
      console.log('wrong extend');
      console.log(config.extend);
      break;
  }
  return result;
}

function editRoom(room) {
  alert('edit Room ' + room);
}

function addRoom() {
  alert('add Room');
}

function addDevice(room) {
  alert('add Device ' + room);
}

function registerEventlistener() {
  document.querySelector('.new').addEventListener('click', (event) => {
    console.log(event.target.value);
    addRoom();
  })
}

function generateTable(daten) {
  let container = document.querySelector(".container");
  daten.forEach(room => {
    let roomHeading = document.createElement('h2');
    let roomNumber = document.createElement('span');
    let roomNumberText = document.createTextNode(room.number);
    let roomText = document.createTextNode("Raum ");
    let box = document.createElement("div");
    let list = document.createElement('ul');
    room.devices.forEach((device) => {
      let listItem = document.createElement('li');
      let text = document.createTextNode(device.name)
      listItem.append(text);
      list.append(listItem);
    });
    let button = document.createElement('button');
    roomHeading.append(roomText);
    roomNumber.append(roomNumberText);
    roomHeading.append(roomNumber);
    roomHeading.addEventListener('click', (event) => {
      console.log(event.target.querySelector('span').textContent);
      editRoom(event.target.querySelector("span").textContent);
    })
    button.textContent = "+";
    button.value = room.number;
    button.addEventListener('click', (event) => {
      console.log(event.target.value);
      addDevice(event.target.value);
    })
    box.setAttribute('class', 'room')
    box.append(roomHeading);
    box.append(list);
    box.append(button);
    container.append(box);
  });
}

/*function generateTable(daten) {
  let count = 0;
  daten.forEach((element) => {
    let edit = document.createElement('td');
    let button = document.createElement('button');
    let buttontext = document.createTextNode("Bearbeiten");
    let zelle = document.createElement("td");
    let zeile = document.createElement("tr");
    let text = document.createTextNode(element.room);
    zelle.append(text);
    button.append(buttontext);
    button.setAttribute("value", element.room);
    button.addEventListener('click', (event) => {
      let value = event.target.getAttribute('value');
      console.log(value);
    })
    edit.append(button);
    zeile.append(edit);
    zeile.append(zelle);
    let index = 0;
    element.devices.forEach((device) => {
      index++;
      let text = document.createTextNode(device.name);
      let zelle = document.createElement("td");
      zelle.append(text);
      zeile.append(zelle);
      if (index > count) {
        count = index;
      }
    });
    console.log(count);

    document.querySelector("table").append(zeile);
    document.querySelector(".devices").setAttribute("colspan", count);
  });
}*/