import {Controller} from '@hotwired/stimulus';
import Choices from 'choices.js';
/*
* 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 values = {
        rolesArray: Array,
        selectedRoleIds: Array,
        applicationsArray: Array,
        selectedApplicationIds: Array
    }
    // {value: 'choice1', label: 'Choice 1'},
    // {value: 'choice2', label: 'Choice 2'},
    // {value: 'choice3', label: 'Choice 3'},

    roleSelect() {
        const element = document.getElementById('roles');
        if (element) {
            const choicesData = this.rolesArrayValue.map(role => ({
                value: role.id,
                label: role.name,
                selected: this.selectedRoleIdsValue.includes(role.id)
            }));

            const choices = new Choices(element, {
                choices: choicesData,
                removeItemButton: true,
                placeholder: true,
                placeholderValue: 'Ajouter un ou plusieurs rôles'
            });
        }
    }

    appSelect() {
        const element = document.getElementById('applications');
        if (element) {

            const choicesData = this.applicationsArrayValue.map(app => ({
                value: app.id,
                label: app.name,
                customProperties: {icon: app.icon},
                selected: this.selectedApplicationIdsValue.includes(app.id)
            }));

            const choices = new Choices(element, {
                choices: choicesData,
                removeItemButton: true,
                placeholder: true,
                placeholderValue: 'Ajouter une ou plusieurs applications',
            });
        }
    }

    connect() {
        this.roleSelect();
        this.appSelect();

        // Set choices after initialization
        // choices.setValue(choicesData);
    }


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