/* STENCIL IMPORTS */
import { Host, h } from "@stencil/core";
/* CUSTOM IMPORTS */
import { config } from "../../../common/config";
import { Locale } from "../../../common/locale";
import { renderListItems } from "../../../common/render-list-item";
import { objectsToListItemData } from "./helpers";
export class GxIdeBpmExportXpdl {
    constructor() {
        this.renderedFirstTime = false;
        this.includeAll = false;
        // 7.LISTENERS //
        // 8.PUBLIC METHODS API //
        // 9.LOCAL METHODS //
        this.objectSelectionChangedHandler = (selectedItem) => {
            const selectedObjects = Array.isArray(selectedItem.detail)
                ? selectedItem.detail
                : [selectedItem.detail];
            this.selectedObjects = selectedObjects.map(item => item.itemId);
        };
        this.removeObjectsHandler = () => {
            this.objects = this.objects.filter(object => !this.selectedObjects.includes(object.id));
            this.selectedObjects = [];
            this.updateSelection(false);
        };
        this.removeAllObjectsHandler = () => {
            this.objects = [];
            this.selectedObjects = [];
            this.updateSelection(false);
        };
        this.includeAllHandler = () => {
            this.includeAll = this.includeAllCheckboxEl.value === "true";
            if (this.includeAll) {
                this.selectedObjects = this.objects.map(object => object.id);
                this.objects = [];
                this.updateSelection(true);
            }
            else {
                this.selectedObjects = [];
                this.updateSelection(false);
            }
            this.selectionChanged.emit();
        };
        this.addCallbackHandler = async () => {
            if (this.addCallback) {
                const resultObjects = await this.addCallback();
                const newObjects = resultObjects.filter(resultObj => !this.objects.some(existingObj => existingObj.id === resultObj.id));
                this.objects = [...this.objects, ...newObjects];
                this.updateSelection(false);
            }
        };
        this.referencesCallbackHandler = async () => {
            if (this.referencesCallback && this.objects.length > 0) {
                const ids = this.objects.map(obj => obj.id);
                const resultObjects = await this.referencesCallback(ids);
                const newObjects = resultObjects.filter(resultObj => !this.objects.some(existingObj => existingObj.id === resultObj.id));
                this.objects = [...this.objects, ...newObjects];
                this.updateSelection(false);
            }
        };
        this.updateSelection = (includeAll) => {
            const data = {
                includeAll: this.includeAllCheckboxEl.value === "true",
                objectIds: includeAll
                    ? this.selectedObjects
                    : this.objects.map(object => object.id)
            };
            this.selection = data;
            this.selectionChanged.emit();
        };
        this.objects = [];
        this.selectedObjects = [];
        this.displayTitle = false;
        this.selection = undefined;
        this.addCallback = undefined;
        this.referencesCallback = undefined;
    }
    // 6.COMPONENT LIFECYCLE METHODS //
    async componentWillLoad() {
        this._componentLocale = await Locale.getComponentStrings(this.el);
    }
    componentDidRender() {
        if (!this.renderedFirstTime) {
            this.componentDidRenderFirstTime.emit(this.el);
            this.renderedFirstTime = true;
        }
    }
    // 10.RENDER() FUNCTION //
    render() {
        return (h(Host, { class: "gx-ide-component gx-ide-bpm-objects-selector" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("gx-ide-list-selector", { id: "path-list", type: "multi-selection", listName: "path-list", ordered: true, onSelectionChanged: this.objectSelectionChangedHandler, class: "path-list" }, renderListItems(objectsToListItemData(this.objects))), h("div", { class: "controls-wrapper" }, h("label", { htmlFor: "include-all" }, this._componentLocale.main.includeAllLabel), h("ch-checkbox", { id: "include-all", accessibleName: this._componentLocale.main.includeAllLabel, checkedValue: "true", unCheckedValue: "false", value: "checked", onInput: this.includeAllHandler, ref: (el) => (this.includeAllCheckboxEl = el) }), h("button", { onClick: this.addCallbackHandler, disabled: this.includeAll }, this._componentLocale.main.addButton), h("button", { onClick: this.referencesCallbackHandler, disabled: this.objects.length === 0 }, this._componentLocale.main.referencesButton), h("button", { onClick: this.removeObjectsHandler, disabled: this.selectedObjects.length === 0 || this.includeAll }, this._componentLocale.main.removeButton, " (", this.selectedObjects.length, ")")), h("button", { slot: "footer-end", onClick: this.removeAllObjectsHandler, disabled: this.includeAll }, this._componentLocale.main.clearButton)))));
    }
    static get is() { return "gx-ide-bpm-objects-selector"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["bpm-objects-selector.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bpm-objects-selector.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/bpm-objects-selector"]; }
    static get properties() {
        return {
            "displayTitle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "false",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true it displays the component title on the header"
                },
                "attribute": "display-title",
                "reflect": false,
                "defaultValue": "false"
            },
            "selection": {
                "type": "unknown",
                "mutable": true,
                "complexType": {
                    "original": "SelectionData",
                    "resolved": "{ includeAll: boolean; objectIds: string[]; }",
                    "references": {
                        "SelectionData": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/objects-selector/bpm-objects-selector.tsx",
                            "id": "src/components/bpm/objects-selector/bpm-objects-selector.tsx::SelectionData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The current selection in the list of objects"
                }
            },
            "addCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => Promise<ObjectData[]>",
                    "resolved": "() => Promise<ObjectData[]>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "ObjectData": {
                            "location": "import",
                            "path": "./helpers",
                            "id": "src/components/bpm/objects-selector/helpers.ts::ObjectData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "returns",
                            "text": "A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object."
                        }],
                    "text": "Callback invoked when the user presses the 'Add' button.\nThis function is expected to return a list of selected objects' basic information."
                }
            },
            "referencesCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(ids: string[]) => Promise<ObjectData[]>",
                    "resolved": "(ids: string[]) => Promise<ObjectData[]>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "ObjectData": {
                            "location": "import",
                            "path": "./helpers",
                            "id": "src/components/bpm/objects-selector/helpers.ts::ObjectData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "param",
                            "text": "ids - An array of IDs of the objects currently added to the list."
                        }, {
                            "name": "returns",
                            "text": "A Promise that resolves to an array of ObjectData. Each ObjectData contains the ID, icon, and name of an object."
                        }],
                    "text": "Callback invoked when the user presses the 'References' button.\nReceives a parameter which is an array of IDs of the objects currently added to the list.\nReturns a Promise that resolves to an array of ObjectData, where each ObjectData contains the ID, icon, and name of an object."
                }
            }
        };
    }
    static get states() {
        return {
            "objects": {},
            "selectedObjects": {}
        };
    }
    static get events() {
        return [{
                "method": "componentDidRenderFirstTime",
                "name": "componentDidRenderFirstTime",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "description",
                            "text": "Gets fired when the component has rendered for the first time."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "HTMLGxIdeBpmObjectsSelectorElement",
                    "resolved": "HTMLGxIdeBpmObjectsSelectorElement",
                    "references": {
                        "HTMLGxIdeBpmObjectsSelectorElement": {
                            "location": "global",
                            "id": "global::HTMLGxIdeBpmObjectsSelectorElement"
                        }
                    }
                }
            }, {
                "method": "selectionChanged",
                "name": "selectionChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "description",
                            "text": "Gets fired when the objects selection list change or when 'Select All' checkbox state changes."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=bpm-objects-selector.js.map
