'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const __chunk_1 = require('./chunk-78439bef.js');

/**
 * Class that represent a multi-select element
 * composed by a clickable text-field
 * that opens a dialog with a list of checkboxes
 */
class MaterialsMultipleSelect {
    constructor(hostRef) {
        __chunk_1.registerInstance(this, hostRef);
        /**
         * list of selected elements
         */
        this.value = [];
        this.change = __chunk_1.createEvent(this, "change", 7);
    }
    componentWillLoad() {
        if (!this.value)
            this.value = [];
        this.computeMultiList();
    }
    componentWillUpdate() {
        if (!this.value)
            this.value = [];
        this.computeMultiList();
    }
    computeMultiList() {
        const nbList = this.maxElementsColumn ? (this.options.size / this.maxElementsColumn) + (this.options.size % this.maxElementsColumn) : 0;
        if (nbList > 0) {
            this.multiList = new Map();
            const keys = Array.from(this.options.keys());
            for (let i = 0; i < nbList; i++) {
                const start = i * this.maxElementsColumn;
                const end = (i + 1) * this.maxElementsColumn;
                this.multiList.set(i, keys.slice(start, end < this.options.size ? end : this.options.size));
            }
        }
        else {
            this.multiList = new Map().set(0, Array.from(this.options.keys()));
        }
    }
    componentDidLoad() {
        this.displayValue();
    }
    componentDidUpdate() {
        this.displayValue();
    }
    /**
     * @param event allows to open dialog when text-field is clicked
     */
    openMultiSelectDialog(event) {
        event.stopPropagation();
        event.preventDefault();
        this.multiSelectDialog.dialogTitle = this.dialogTitle;
        this.multiSelectDialog.toggle();
    }
    /**
     * Function called when dialog is accepted
     * emit change event
     * display values selected in text-field
     */
    fillMultiSelectInput() {
        this.displayValue();
        this.change.emit();
    }
    /**
     * Function that displays values selected in the text-field
     */
    displayValue() {
        if (this.value) {
            const selectedValue = this.value.map(val => {
                return this.options.get(val);
            }).join(', ');
            this.multiSelectInput.componentOnReady().then(() => {
                this.multiSelectInput.value = selectedValue;
                this.multiSelectInput.title = selectedValue;
            });
        }
    }
    /**
     * Function to select or deselect options
     * @param {CustomEvent} event allows to know if options must be selected or deselected
     * @param {string} option to select or deselect
     */
    toggleOption(event, option) {
        event.stopPropagation();
        event.preventDefault();
        if (event.detail) {
            this.value.push(option);
        }
        else {
            this.value.splice(this.value.indexOf(option), 1);
        }
    }
    render() {
        return ([
            __chunk_1.h("materials-text-field", { focused: !!this.value && this.value.length > 0, readonly: true, label: this.label, overflow: true, "trailing-icon": this.trailingIcon, dense: this.dense, ref: el => this.multiSelectInput = el, onClick: (event) => this.openMultiSelectDialog(event) }),
            __chunk_1.h("materials-dialog", { acceptButton: "S\u00E9lectionner", cancelButton: "Annuler", "close-button": true, onAccept: () => this.fillMultiSelectInput(), ref: el => this.multiSelectDialog = el }, __chunk_1.h("div", { slot: "body", class: "body-list" }, this.multiList && Array.from(this.multiList.keys()).map(optKeys => {
                return __chunk_1.h("materials-list", null, this.multiList.get(optKeys).map(opt => {
                    return __chunk_1.h("materials-list-item-checkbox", { onChange: (event) => this.toggleOption(event, opt), checked: this.value && this.value.length > 0 && !!this.value.find(val => opt === val), label: this.options.get(opt), value: opt });
                }));
            })))
        ]);
    }
    get host() { return __chunk_1.getElement(this); }
    static get style() { return ":host{display:block;font-size:1rem}:host materials-text-field{text-overflow:ellipsis}:host .body-list{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}"; }
}

exports.materials_multiple_select = MaterialsMultipleSelect;
