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',
                // callbackOnCreateTemplates: function(template) {
                //     return {
                //         // Custom rendering for dropdown choices
                //         choice: (classNames, data) => {
                //             return template(`
                //     <div class="${classNames.item} ${classNames.itemChoice}" data-select-text="${this.config.itemSelectText}" data-choice data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'} >
                //         ${data.customProperties && data.customProperties.icon ? `<img src="${data.customProperties.icon}" alt="" style="width:20px;height:20px;vertical-align:middle;margin-right:8px;">` : ''}
                //         ${data.label}
                //     </div>
                // `);
                //         },
                //         // Custom rendering for selected items
                //         item: (classNames, data) => {
                //             return template(`
                //     <div class="${classNames.item} ${classNames.itemSelectable}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
                //         ${data.customProperties && data.customProperties.icon ? `<img src="${data.customProperties.icon}" alt="" style="width:20px;height:20px;vertical-align:middle;margin-right:8px;">` : ''}
                //         ${data.label}
                //     </div>
                // `);
                //         }
                    })
                }
            };
    //     }
    // }

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