// GASからJSONデータを取得してHTML要素を生成する
async function fetchAndGenerateData() {
  const response = await fetch('https://script.google.com/macros/s/AKfycbwTOaOZkom7XpWBvlDCBf6pv7MYqag0BT1Lu0H-a4ZS9rM5DEHBhGlQFv-zys70RL1Kng/exec');
  const jsonData = await response.json();
  // HTML内の要素を取得
  const nameElement = document.getElementById('name');
  const eventContainer = document.getElementById('eventContainer');

  nameElement.textContent = jsonData[0].areaID;

  const categories = {};
  // JSONデータをもとに要素を生成
  for (const data of jsonData) {
      const category = data.category;
      if (!categories[category]) {
          categories[category] = [];
      }
      categories[category].push(data);
  }

  for (const category in categories) {
      const categoryId = categories[category].length;
      const categoryContainer = createCategoryContainer(category, categoryId);

      // カテゴリーごとにメニューを追加できるようにした
      for (const data of categories[category]) {
          const eventDiv = createEventElement(data);
          categoryContainer.appendChild(eventDiv);
      }
      eventContainer.appendChild(categoryContainer);
  }
}

// カテゴリーごとのコンテナを生成
function createCategoryContainer(category, categoryId) {
  const categoryContainer = document.createElement('div');
  categoryContainer.classList.add('categoryContainer');

  const h2 = document.createElement('h2');
  h2.classList.add('category');
  h2.textContent = category;
  h2.id = `category-${categoryId}`;
  eventContainer.appendChild(h2);

  const navLink = document.createElement('a');
  navLink.href = `#category-${categoryId}`;
  navLink.textContent = category;
  const navItem = document.createElement('li');
  navItem.appendChild(navLink);
  document.querySelector('.navbar ul').appendChild(navItem);

  return categoryContainer;
}

// イベント要素を生成
function createEventElement(data) {
  const div = document.createElement('div');
  div.classList.add('event-item');

  if (data.pageLink) {
      const a = document.createElement('a');
      a.href = data.pageLink;
      a.target = '_blank';
      div.appendChild(a);

      const img = createImageElement(data.img);
      a.appendChild(img);
  } else {
      const img = createImageElement(data.img);
      div.appendChild(img);
  }

  const h3 = createHeadingElement('h3', 'eventName', data.eventName);
  div.appendChild(h3);

  if (data.location) {
      const p1 = createParagraphElement('p', 'location', `場所： ${data.location}`);
      div.appendChild(p1);
  }

  if (data.date) {
      const p2 = createParagraphElement('p', 'date', `開催期間： ${data.date}${data.inSession === 'O' ? ' (終了)' : ''}`);
      div.appendChild(p2);
  }

  return div;
}

// 画像要素を生成
function createImageElement(imgSrc) {
  const img = document.createElement('img');
  img.src = imgSrc;
  return img;
}

// ヘッディング要素を生成
function createHeadingElement(tag, className, textContent) {
  const element = document.createElement(tag);
  element.classList.add(className);
  element.textContent = textContent;
  return element;
}

// 段落要素を生成
function createParagraphElement(tag, className, textContent) {
  const element = document.createElement(tag);
  element.classList.add(className);
  element.textContent = textContent;
  return element;
}

// ページ読み込み時にJSONデータを取得してHTML要素を生成
window.addEventListener('DOMContentLoaded', fetchAndGenerateData);