import { Controller } from '@hotwired/stimulus';
import Choices from 'choices.js';

export default class extends Controller {
    static values = {
        rolesArray: Array,
        selectedRoleIds: Array,
    }

    static targets = ["select"];

    connect() {
        this.roleSelect();
    }

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

            new Choices(this.selectTarget, {
                choices: choicesData,
                removeItemButton: true,
                placeholder: true,
                placeholderValue: 'Ajouter un ou plusieurs rôles',
            });
        }
    }
}