/**
 * Component to render data for not conserved assets
 * @class NotConserved
 */
export class NotConserved {
    biblioElements = [];
    /**
     * @param {object} data
     */
    set data(data) {
        this._data = data;
    }

    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.genericLocation}
            </p>
            <p class="mt-4 pl-2 pr-5">
                <strong class="pb-3">Descrizione</strong></br>
                ${this._data.shortDescription}
            </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>
            <p class="p-2 mb-4">
                <strong>Autore scheda:</strong> ${this._data.author}
            </p>
        </div>`;
    }

    renderImages() {
		let content = `<div class="content has-text-centered">
			<p class="is-size-5 mt-3">Immagini</p>`;
		content += `
			<div style="max-width: 70%; margin: 0 auto">
				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
				<figure class="is-relative is-clickable has-text-centered" id="not-conserved-gallery">
					<img src="img/${this.images[0].filename}" width="300"/>
					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
						<i class="is-flex fa fa-2x fa-play-circle"></i>
					</div>
				</figure>
			</div>
		</div>`;

        return content;
    }
    /**
     * @param {HTMLElement} imageContainer
     * @param {Function} gallery
     */
    async setImages(imageContainer, gallery) {
        //let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)

        if (this._data.images.length) {
            this.images = this._data.images;
            imageContainer.innerHTML = this.renderImages();
            gallery('not-conserved-gallery', this.images);
        } else
            imageContainer.innerHTML = '<p class="has-text-centered">Nessuna risorsa visuale disponibile</p>';
    }

    async renderDocs() {
        let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`);

        this.documentation = record.documents.filter(d => d.type === 'documentazione')
        this.publications = record.documents.filter(d => d.type === 'pubblicazione');

        let content = `
            <div class="has-bottom-border">
                <div class="p-2">
                    <table class="p-4 table is-fullwidth is-striped">
                        <thead>
                            <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Documentazione di archivio</th>
                            <tr><th>Titolo</th><th>Luogo di conservazione</th><th>Download</th></tr>
                        </thead>
                        <tbody>
            `;

		for (const doc of this.documentation) {
			content += `
				<tr><td>${doc.title}</td><td>${doc.conservationPlace}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                    <i class="fa fa-download mr-2"></i> PDF
                </a></td></tr>
			`;
		}
        if (this.publications.length) {
            content += `
                    </tbody>
                    <thead>
                        <tr><th colspan=3 class="p-2 has-text-centered is-size-5">Pubblicazioni del progetto Carta Archeologica</th>
                        <tr><th>Titolo</th><th>Autori</th><th>Download</th></tr>
                    </thead>
                    <tbody>
            `;
            for (const doc of this.publications) {
                content += `
                    <tr><td>${doc.title}</td><td>${doc.authors}</td><td><a class="button is-link has-text-white" href="docs/${doc.filename}">
                        <i class="fa fa-download mr-2"></i> PDF
                    </a></td></tr>
                `;
            }
        }
		content += `
                </tbody>
                </table>
                </div>
            </div>
        `;

        return content;
    }

    async biblio(recordId) {
        let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);

        let citations = '';

        if (record.bibliography.length) {
            record.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().trim()}</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());
    }
}