import { h, Host } from "@stencil/core";
import { createRandomString } from "../../util/random-string";
/**
 * The document picker component allows users to select one or more
 * files from a list of available documents.
 *
 * It is primarily designed to facilitate the selection of files
 * that a user might want to import into the CRM, for example via
 * our Microsoft Outlook Add-in.
 *
 * @exampleComponent limebb-example-document-picker-basic
 * @exampleComponent limebb-example-document-picker-selection-mode
 * @exampleComponent limebb-example-document-picker-limited-selection
 * @exampleComponent limebb-example-document-picker-contextual-info
 *
 * @beta
 */
export class DocumentPicker {
    constructor() {
        /**
         * The list of document items to display in the picker.
         */
        this.items = [];
        /**
         * Set to `true` to indicate that the current selection is invalid.
         */
        this.invalid = false;
        /**
         * Set to `true` to indicate that selecting an item is required.
         */
        this.required = false;
        /**
         * Defines whether the picker allows single or multiple selection.
         * - 'radio': Allows single selection within a group.
         * - 'checkbox': Allows multiple selection.
         */
        this.type = 'checkbox';
        this.handleItemInteract = (event) => {
            event.stopPropagation();
            const interactedItem = event.detail;
            if (!interactedItem) {
                return;
            }
            let updatedItems;
            if (this.type === 'radio') {
                // For radio buttons: either select the clicked item (and deselect others)
                // or allow deselecting if clicking the already selected item
                updatedItems = this.items
                    .map((item) => {
                    if (item.file.id === interactedItem.file.id) {
                        return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
                    }
                    return Object.assign(Object.assign({}, item), { selected: false });
                })
                    .find((item) => item.selected);
            }
            else {
                updatedItems = this.items
                    .map((item) => {
                    if (item.file.id === interactedItem.file.id) {
                        return Object.assign(Object.assign({}, item), { selected: interactedItem.selected });
                    }
                    return item;
                })
                    .filter((item) => item.selected);
            }
            this.change.emit(updatedItems);
        };
        this.renderHelperLine = () => {
            if (!this.helperText) {
                return;
            }
            return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
        };
        this.helperTextId = createRandomString();
        this.labelId = createRandomString();
    }
    render() {
        return (h(Host, { key: 'cf8c1618a2d98a0278e16a634df162b9e0e7cb3e' }, h("limel-notched-outline", { key: '07e5f29db31eb7fc89b915e311bba3c2c6e2826a', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: '65a36951d5ffa6e23ee90fc98e2bac82ba26e6ed', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
    }
    renderItems() {
        return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.file.id, type: this.type, onInteract: this.handleItemInteract })));
    }
    static get is() { return "limebb-document-picker"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["document-picker.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["document-picker.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                },
                "getter": false,
                "setter": false
            },
            "context": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentContext",
                    "resolved": "LimeWebComponentContext",
                    "references": {
                        "LimeWebComponentContext": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentContext",
                            "referenceLocation": "LimeWebComponentContext"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                },
                "getter": false,
                "setter": false
            },
            "items": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "DocumentItem[]",
                    "resolved": "DocumentItem[]",
                    "references": {
                        "DocumentItem": {
                            "location": "import",
                            "path": "./document-item/document-item.types",
                            "id": "src/components/document-picker/document-item/document-item.types.ts::DocumentItem",
                            "referenceLocation": "DocumentItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The list of document items to display in the picker."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label to display for the group of items."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "label"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional helper text to display below the items."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "helper-text"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that the current selection is invalid."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `true` to indicate that selecting an item is required."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required",
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "DocumentType",
                    "resolved": "\"checkbox\" | \"radio\"",
                    "references": {
                        "DocumentType": {
                            "location": "import",
                            "path": "./document.types",
                            "id": "src/components/document-picker/document.types.ts::DocumentType",
                            "referenceLocation": "DocumentType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines whether the picker allows single or multiple selection.\n- 'radio': Allows single selection within a group.\n- 'checkbox': Allows multiple selection."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "type",
                "defaultValue": "'checkbox'"
            }
        };
    }
    static get events() {
        return [{
                "method": "change",
                "name": "change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a user changes the selection state of an item."
                },
                "complexType": {
                    "original": "DocumentItem | DocumentItem[]",
                    "resolved": "DocumentItem | DocumentItem[]",
                    "references": {
                        "DocumentItem": {
                            "location": "import",
                            "path": "./document-item/document-item.types",
                            "id": "src/components/document-picker/document-item/document-item.types.ts::DocumentItem",
                            "referenceLocation": "DocumentItem"
                        }
                    }
                }
            }];
    }
}
