document.addEventListener("DOMContentLoaded", () => {
    var photo = document.querySelector("div.photo"), // <div class="photo">
        shop  = document.querySelector("div.shop");  // <div class="shop">
    var photobtn, shopbtn;    // あとでボタン一覧を格納する
    
    // 最後に選択されたラジオボタンを記憶する
    let lastPhoto = null;
    let lastShop = null;

    function resetBtns() {    // ラジオボタンを全部未チェックにする
        for (let b of document.querySelectorAll('input[type="radio"]')) {
            b.checked = false;
            console.log("Cleared");
        }
    }

    function createDivs(csv) {
        console.log(`photo=${photo}`);
        console.log(`csv=${csv.length}`);
        for (let row of csv) {
            let ph = row["photo"], sh = row["shop"], desc = row["説明"],
                jpg = "image/"+ph+".jpg";
            photo.insertAdjacentHTML(
                'beforeend',
                `<input name="photo" type="radio" id="${ph}">
    <label for="${ph}"><img src="${jpg}" title="${desc}" class="toggle-photo" style="display: none;"></label>\n`);
            shop.insertAdjacentHTML(
                'beforeend',
                `<input name="shop" type="radio" id="s-${ph}">
    <label for="s-${ph}" class="toggle-shop"><span style="display: none;">${sh}</span></label>\n`);
        }
        photobtn = document.querySelectorAll('div.photo input[type="radio"]');
        shopbtn  = document.querySelectorAll('div.shop input[type="radio"]');
        resetBtns();

        // 写真ラジオボタンのトグル処理
        for (let radio of photobtn) {
            radio.addEventListener("click", function () {
                let img = this.nextElementSibling.querySelector('img');
                if (this.checked && this === lastPhoto) {
                    this.checked = false;  // チェックを解除
                    lastPhoto = null;
                    img.style.display = 'none'; // 画像非表示
                } else {
                    lastPhoto = this;
                    img.style.display = 'block'; // 画像表示
                }
            }, false);
        }

        // 店名ラジオボタンのトグル処理
        for (let radio of shopbtn) {
            radio.addEventListener("click", function () {
                let labelSpan = this.nextElementSibling.querySelector('span');
                if (this.checked && this === lastShop) {
                    this.checked = false;  // チェックを解除
                    lastShop = null;
                    labelSpan.style.display = 'none'; // 店名非表示
                } else {
                    lastShop = this;
                    labelSpan.style.display = 'block'; // 店名表示
                }
                hantei1(this); // 正誤判定を行う
            }, false);
        }
    }

    // 正誤判定: 写真が選ばれたらリセット処理
    function hantei0(e) {
        var selection = e.target.id;
        console.log(`val = ${selection}`);    // 写真側どれかボタンが選ばれたら
        for (let b of shopbtn) {    // 店名ラジオボタンを
            b.checked = false;        // 全部未チェックにする
        }
        document.getElementById("kekka").textContent = ''; // 結果表示をリセット
    }

    // 正誤判定: 選択されているshopボタンのidを返す
    function whichshop() {
        let selected;
        for (let b of photobtn)
            if (b.checked) return b.id;
        return null;    // 選択されていなければnull
    }

    // 正誤判定: 店名が選ばれたら判定する
    function hantei1(selectedShop) {
        let kekka = document.getElementById("kekka"),
            selphoto = whichshop();
        if (selphoto) {            // 写真側で何か選ばれていたら
            if (selectedShop.id === "s-" + selphoto) {
                kekka.textContent = "正解!"    // p要素の内部文字列を上書き
                kekka.classList.remove("ng");    // ngのclass設定を外して
                kekka.classList.add("ok");    // okのclass設定を足す
            } else {
                kekka.textContent = "ぶっぶー!"
                kekka.classList.remove("ok");
                kekka.classList.add("ng");
            }
        } else {
            kekka.textContent = "写真側を選んでください。";
        }
    }

    document.getElementById("shuffle").addEventListener("click", (e) => {
        let script = document.createElement("script");
        script.src = "memory-shuffle.js";
        document.body.appendChild(script);
        resetBtns();
    }, false);

    fetch("./memory.csv").then(resp=>{
        return resp.text().then(text=>{
            createDivs(new CSV(text, {header: true}).parse());
        });
    })
}, false);