import { h } from '@stencil/core';
/**
 * Class that represent a multi-select element
 * composed by a clickable text-field
 * that opens a dialog with a list of checkboxes
 */
export class MaterialsMultipleSelect {
    constructor() {
        /**
         * list of selected elements
         */
        this.value = [];
    }
    componentWillLoad() {
        if (!this.value)
            this.value = [];
    }
    componentWillUpdate() {
        if (!this.value)
            this.value = [];
    }
    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 ([
            h("materials-text-field", { disabled: true, label: this.label, overflow: true, "trailing-icon": this.trailingIcon, dense: this.dense, ref: el => this.multiSelectInput = el, onClick: (event) => this.openMultiSelectDialog(event) }),
            h("materials-dialog", { acceptButton: "S\u00E9lectionner", cancelButton: "Annuler", "close-button": true, onAccept: () => this.fillMultiSelectInput(), ref: el => this.multiSelectDialog = el },
                h("materials-list", { slot: "body" }, this.options && Array.from(this.options.keys()).map(opt => {
                    return 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 });
                })))
        ]);
    }
    static get is() { return "materials-multiple-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["multiple-select.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["multiple-select.css"]
    }; }
    static get properties() { return {
        "dense": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Apply low density on the textfield"
            },
            "attribute": "dense",
            "reflect": false
        },
        "trailingIcon": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Adds an icon at the end of the text field"
            },
            "attribute": "trailing-icon",
            "reflect": false
        },
        "options": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Map<string, string>",
                "resolved": "Map<string, string>",
                "references": {
                    "Map": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Map of options selectable in the dialog"
            }
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Label displayed for the multi-select"
            },
            "attribute": "label",
            "reflect": false
        },
        "dialogTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Title displayed in the dialog"
            },
            "attribute": "dialog-title",
            "reflect": false
        },
        "value": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "string[]",
                "resolved": "string[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "list of selected elements"
            },
            "defaultValue": "[]"
        }
    }; }
    static get events() { return [{
            "method": "change",
            "name": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": "Event dispatched when multi-select value changes"
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get elementRef() { return "host"; }
}
