import { Controller } from '@hotwired/stimulus';

/*
* 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 = ['button', 'options']
    static outlets = ['result-filter', 'dialog']
    static values = {
        tmdbId: String,
        imdbId: String,
        title: String,
    }

    initialize() {
        // Called once when the controller is first instantiated (per element)

        // Here you can initialize variables, create scoped callables for event
        // listeners, instantiate external libraries, etc.
        // this._fooBar = this.fooBar.bind(this)
    }

    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)
    }

    // 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)
    }

    toggle() {
        this.optionsTarget.classList.toggle('hidden');
    }

    async monitorSeries() {
        await this.makeMonitor({
            tmdbId: this.tmdbIdValue,
            imdbId: this.imdbIdValue,
            title: this.titleValue,
            monitorType: 'tvshows',
        });
        if (this.hasDialogOutlet) {
            this.dialogOutlet.close();
        }
    }

    async monitorSeason() {
        await this.makeMonitor({
            tmdbId: this.tmdbIdValue,
            imdbId: this.imdbIdValue,
            title: this.titleValue,
            monitorType: 'tvseason',
            season: this.resultFilterOutlet.activeFilter['season'],
        });
    }

    async monitorEpisode() {
        // ToDo: figure out how to set episode
        await this.makeMonitor({
            tmdbId: this.tmdbIdValue,
            imdbId: this.imdbIdValue,
            title: this.titleValue,
            monitorType: 'tvepisode',
            season: this.resultFilterOutlet.activeFilter['season'],
            episode: '',
        });
    }

    async makeMonitor(body) {
        const response = await fetch('/api/monitor', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify(body)
        });

        return await response.json();
    }
}