/**
 * @class Prehistoric
 */
export class Prehistoric {
    biblioElements = [];
    
    set data(data) {
        this._data = data;
    }
    /**
     * 
     * @todo Biblio
     * @returns {string} The HTML
     */
    async render() {
        return `
        <div class="container px-4 pt-4">
            <p class="p-2">
                <span class="icon has-text-link">
                    <i class="fa fa-tag"></i>
                </span>
                <strong>Denominazione:</strong> ${this._data.denomination}
            </p>
            <p class="p-2">
                <span class="icon has-text-link">
                    <i class="fa fa-hourglass"></i>
                </span>
                <strong>Periodo:</strong> ${this._data.period}
            </p>
            <p class="p-2">
                <span class="icon has-text-link">
                    <i class="fa fa-map"></i>
                </span>
                <strong>Località generica:</strong> ${this._data.genericPlace}
            </p>
            <p class="mt-4 pl-2 pr-5">
                <strong class="pb-3">Descrizione breve</strong></br>
                ${this._data.description}
            </p>
            <p class="p-2">
                <strong>Conservazione:</strong> ${this._data.conservation}
            </p>
            <p class="p-2 mb-4">
                <strong>Autore scheda:</strong> ${this._data.author}
            </p>
        </div>`;

        /*

            <p class="mt-4 pl-2 pr-5">
                <span class="icon has-text-link">
                    <i class="fa fa-book"></i>
                </span>
                <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
            </p>
            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
        */
    }
    /**
     * @param {number} recordId 
     */
    async biblio(recordId) {
        let finding = await this.fetchData(`${window.API_URL}/prehistoric/${recordId}`);

        let citations = '';

        if (finding.bibliography.length) {
            finding.bibliography.forEach(record => {
                citations += `
                    <span class="is-clickable is-capitalized has-text-link"
                        data-action="click->biblio#open"
                        id="cit-${record.id}">
                        ${record.citation.toLowerCase()}</span>`;

                citations += record.pages?.length ? `, ${record.pages};` : ';';

                this.biblioElements.push(`
                    <div class="p-2 mt-2" id="ref-${record.id}">
                        <p class="p-3">${record.reference}</p>
                    </div>
                `);
            });
        }

        return citations.trim().slice(0, -1);
    }

    getReference(id) {
        return this.biblioElements.find(ref => {
            let regex = new RegExp('ref-'+id+'"');
            return ref.match(regex);
        });
    }

    async fetchData(url) {
        return await fetch(url).then(res => res.json());
    }
}