import { Controller } from "@hotwired/stimulus"
import { GisState } from "../state.js";

export default class extends Controller {
    static targets = ['biblio', 'cit', 'ref', 'close'];

    open(event) {
        const biblio = GisState.bibliography;
        this.trigger = event.currentTarget;
        const id = this.trigger.id.replace('cit-', '');
        this.ref = this.biblioTarget;

        if (this.trigger.parentElement.nodeName === 'TD') {
            this.ref = this.biblioTargets.find(t => t.id === 'biblio-detail');
        }

		this.ref.innerHTML = '<button class="delete" data-action="click->biblio#hideBiblio"></button>';
        this.ref.innerHTML += biblio.getReference(id);

        this.showBiblio();
    }

    close() {
        this.modalTarget.classList.remove('is-active');
    }

    showBiblio() {
        this.ref.classList.remove('is-hidden');
		this.ref.scrollIntoView({behavior: 'smooth'});
    }

    hideBiblio() {
		this.ref.classList.add('is-hidden');
		this.trigger.parentElement.scrollIntoView({behavior: 'smooth'});
    }
}
