// ┬  ┬┌─┐┌┬┐┌─┐
// │  │└─┐ │ └─┐
// ┴─┘┴└─┘ ┴ └─┘
// Functions for printing both lists

const generateFirstListsContainer = () => {
  console.log('Running firstlistscontainer');
  for (const list of CONFIG.firstlistsContainer) {
    let item = `
        <div class="card list list__${list.id}" id="list_${list.id}">
        <i class="listIcon" icon-name="${list.icon}"></i>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[0].link}"
        class="listItem"
        >${list.links[0].name}</a>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[1].link}"
        class="listItem"
        >${list.links[1].name}</a>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[2].link}"
        class="listItem"
        >${list.links[2].name}</a>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[3].link}"
        class="listItem"
        >${list.links[3].name}</a>
        </div>
      `;
    const position = 'beforeend';
    lists_1.insertAdjacentHTML(position, item);
  }
};

const generateSecondListsContainer = () => {
  console.log('Running second');
  for (const list of CONFIG.secondListsContainer) {
    let item = `
        <div class="card list list__${list.id}" id="list_${list.id}">
        <i class="listIcon" icon-name="${list.icon}"></i>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[0].link}"
        class="listItem"
        >${list.links[0].name}</a>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[1].link}"
        class="listItem"
        >${list.links[1].name}</a>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[2].link}"
        class="listItem"
        >${list.links[2].name}</a>
        <a
        target="${CONFIG.openInNewTab ? '_blank' : ''}"
        href="${list.links[3].link}"
        class="listItem"
        >${list.links[3].name}</a>
        </div>
      `;
    const position = 'beforeend';
    lists_2.insertAdjacentHTML(position, item);
  }
};

const generateLists = () => {
  switch (CONFIG.bentoLayout) {
    case 'bento':
      generateFirstListsContainer();
      break;
    case 'lists':
      generateFirstListsContainer();
      generateSecondListsContainer();
      break;
    default:
      break;
  }
};

generateLists();