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', 'deleteFileInput']

    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)
        // this.element.addEventListener('click', (event) => {
        //     let previewContentModal = document.querySelector('#previewContentModal');
        //     // previewContentModal.setHeading(event.target.dataset['title']);
        //     // previewContentModal.setContent('<p>Testing this here thingy-ma-bob!</p>');
        //     // previewContentModal.showModal();
        //     let content, heading = ""
        //     if (event.target.tagName !== "TR") {
        //         content = event.target.parentElement.previewContent();
        //         heading = event.target.parentElement.mediaTitle;
        //     } else {
        //         content = event.target.previewContent();
        //         heading = event.target.mediaTitle;
        //     }
        //
        //     document.dispatchEvent(new CustomEvent('showPreviewContentModal', {detail: {heading: heading, content: content}}))
        // })
    }

    downloadTargetConnected(target) {
        let downloads = this.element.querySelectorAll('tbody tr');

        downloads.forEach(download => {
            download.addEventListener('click', (event) => {
                let content, heading = ""
                if (event.target.tagName !== "TR") {
                    content = event.target.parentElement.previewContent;
                    heading = "Download # " + event.target.parentElement.downloadId + " - \"" + event.target.parentElement.mediaTitle + "\"";
                } else {
                    content = event.target.previewContent;
                    heading = "Download # " + event.target.downloadId + " - \"" + event.target.mediaTitle + "\"";
                }

                if (null !== content && undefined !== content && "" !== content) {
                    document.dispatchEvent(new CustomEvent('showPreviewContentModal', {detail: {heading: heading, content: content}}))
                }
            })
        })
    }

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

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

    deleteDownload(data) {
        const deleteFileInput = document.querySelector(`#delete_file_${data.params.id}`)
        fetch(`/api/download/${data.params.id}?deleteFile=${deleteFileInput.checked}`, {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)
    }
}