// GASからJSONデータを取得してHTML要素を生成する
async function fetchAndGenerateData() {
    const response = await fetch('https://script.google.com/macros/s/AKfycbwhEqSQzolJ2Bs91XRgxATx45NPCShqjHxCCukqXLB2Jg4XayGqibBPvEZ96kAcgp7Z/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);