import Utils from "./utils.js";
/**
 * @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> ${Utils.parseMarkers(this._data.genericPlace)}
            </p>
            <p class="mt-4 pl-2 pr-5">
                <strong class="pb-3">Descrizione breve</strong></br>
                ${Utils.parseMarkers(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>
            <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>
        </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 {HTMLElement} imageContainer
     * @param {Function} gallery
     */
    async setImages(imageContainer, gallery) {
        if (this._data.images?.length) {
            imageContainer.innerHTML = Utils.renderImages('prehist-gallery', this._data.images);
            gallery('prehist-gallery', this._data.images);
        } else
            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
    }
    /**
     * @param {number} recordId 
     */
    async biblio(recordId) {
        let {citations, biblioElements} = await Utils.buildBibliography('prehistoric', recordId);
        this.biblioElements = biblioElements;

        return citations;
    }

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