// Il Muro del Sanpierino nel telefonino del Barone: rifà quello che facevano thewall.php, drawbar.php,
// getsmile.php e messagebody.php. I messaggi del gioco (story.closeups.muro_sanpierino.messages) stanno in cima,
// quelli che valgono adesso (ognuno col suo `when`); sotto i messaggi veri del 2007. «Aggiorna» ricarica la pagina:
// se nel frattempo la storia è andata avanti, compaiono i messaggi nuovi.
import { check } from '../../src/engine/game.js';

const PER_PAGE = 50;
const game = (() => { try { return parent.game; } catch { return null; } })();
const def = game?.story.closeups.muro_sanpierino;
const { smiles, messages: real } = await (await fetch('./messaggi.json')).json();
const ours = (def?.messages ?? []).filter(m => check(m.when, game.state)).sort((a, b) => b.date.localeCompare(a.date));
const all = [...ours, ...real];
const from = Math.max(0, Number(new URLSearchParams(location.search).get('pag')) || 0);

// Gli smile come li metteva getsmile.php, e gli a capo.
const smile = text => Object.entries(smiles).reduce((t, [code, link]) => t.split(code).join(`&nbsp;<img src="./img/${link}" alt="" />`), text);
const body = m => smile(m.text).replace(/\r\n|\r|\n/g, '<br />');
const when = d => { const [day, hour] = d.split(' '), [y, mo, dd] = day.split('-'); return `${dd}/${mo}/${y}<br />${hour}`; };

document.getElementById('count').textContent = `(Messaggi lasciati sul muro: ${all.length})`;
document.getElementById('wall').innerHTML = all.slice(from, from + PER_PAGE).map(m => `
    <p class="spacer"><img src="./img/spacer.gif" alt="" /></p>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="padding:5px;">
        <tr><td class="td30"><div class="question"></div></td><td class="td70"><div class="text">${when(m.date)}</div></td></tr>
        <tr><td align="left"><div class="question">Chi Sei?&nbsp;&nbsp;</div><br /></td><td align="left"><div class="name"> ${smile(m.nick)}</div><br /></td></tr>
        <tr><td align="left" valign="top"><div class="question">Messaggio&nbsp;&nbsp;</div><br /></td><td align="left"><div class="response"><p>${body(m)}</p><br /><br /></div></td></tr>
    </table>`).join('');

// La barra coi pulsanti (drawbar.php): Inizio e Precedente spenti sulla prima pagina, Successiva e Ultima
// sull'ultima; «Scrivi» sempre spento.
const page = n => `./index.html${n > 0 ? '?pag=' + n : ''}`, last = Math.max(0, Math.floor((all.length - 1) / PER_PAGE) * PER_PAGE);
const buttons = [
    ['Inizio', 'pagefirst.gif', from > 0 && (() => location.href = page(0)), true],
    ['Precedente', 'pageback.gif', from > 0 && (() => location.href = page(from - PER_PAGE)), true],
    ['SCRIVI', 'postmessage.gif', null, true],
    ['Aggiorna', 'refresh.gif', () => location.reload(), true],
    ['Home', 'home.gif', () => game?.closeupHome(), true],
    ['Successiva', 'pageahead.gif', from < last && (() => location.href = page(from + PER_PAGE)), false],
    ['Ultima', 'pagelast.gif', from < last && (() => location.href = page(last)), false],
];
for (const bar of document.querySelectorAll('.bar')) {
    const table = document.createElement('table'), tr = table.insertRow();
    Object.assign(table, { width: '100%', border: 0, cellPadding: 0, cellSpacing: 5 });
    for (const [label, icon, go, before] of buttons) {
        const div = tr.insertCell().appendChild(document.createElement('div')), img = `<img class="imgbar" src="./img/${icon}" alt="" />`;
        div.className = 'pagerbutton' + (go ? '' : ' pagerbutton_disabled');
        div.innerHTML = before ? `${img}&nbsp;&nbsp;${label}` : `${label}&nbsp;&nbsp;${img}`;
        if (go) {
            div.onmouseover = () => { div.className = 'pagerbutton pagerbutton_over'; };
            div.onmouseout = () => { div.className = 'pagerbutton'; };
            div.onclick = go;
        }
    }
    bar.replaceWith(table);
}
document.getElementById('logo').onclick = e => { e.preventDefault(); game?.closeupHome(); };