import { Controller } from '@hotwired/stimulus';
import { getComponent } from '@symfony/ux-live-component';
/*
* The following line makes this controller "lazy": it won't be downloaded until needed
* See https://symfony.com/bundles/StimulusBundle/current/index.html#lazy-stimulus-controllers
*/

/* stimulusFetch: 'lazy' */
export default class extends Controller {
    static targets = ['download', 'downloadRow', 'viewAllBtn']
    static values = {
        isWidget: Boolean,
        perPage: Number,
    }

    component = null;

    async initialize() {
        this.component = await getComponent(this.element);
    }

    connect() {
        // Called every time the controller is connected to the DOM
        // (on page load, when it's added to the DOM, moved in the DOM, etc.)

        // Here you can add event listeners on the element or target elements,
        // add or remove classes, attributes, dispatch custom events, etc.
        // this.fooTarget.addEventListener('click', this._fooBar)
    }

    downloadRowTargetConnected(target) {
        if (Boolean(target.getAttribute('isBroadcasted')) === true) {
            this.viewAllBtnTarget.parentElement.append(this.viewAllBtnTarget);
            if (this.downloadRowTargets.length > this.perPageValue) {
                target.classList.add('hidden');
                this.viewAllBtnTarget.classList.remove('hidden');
            } else {
                this.viewAllBtnTarget.classList.add('hidden');
            }
        }
    }

    downloadRowTargetDisconnected(target) {
        this.viewAllBtnTarget.parentElement.append(this.viewAllBtnTarget);
        let i = 1;
        this.downloadRowTargets.forEach((downloadRow) => {
            console.log(downloadRow)
            if (i <= this.perPageValue) {
                downloadRow.classList.remove('hidden');
            } else {
                downloadRow.classList.add('hidden');
            }
        })

        if (this.downloadRowTargets.length > this.perPage) {
            this.viewAllBtnTarget.classList.remove('hidden');
        }
    }

    downloadTargetConnected(target) {
        let downloads = this.element.querySelectorAll('tbody tr');
        if (downloads.length > this.perPageValue) {
            target.classList.add('hidden');
        }
    }

    deleteDownload(data) {
        fetch(`/api/download/${data.params.id}`, {method: 'DELETE'})
            .then(res => res.json())
            .then(json => console.debug(json));
    }

    // Add custom controller actions here
    // fooBar() { this.fooTarget.classList.toggle(this.bazClass) }

    disconnect() {
        // Called anytime its element is disconnected from the DOM
        // (on page change, when it's removed from or moved in the DOM, etc.)

        // Here you should remove all event listeners added in "connect()" 
        // this.fooTarget.removeEventListener('click', this._fooBar)
    }
}