/* STENCIL IMPORTS */
import { Host, h } from "@stencil/core";
/* OTHER LIBRARIES IMPORTS */
/* CUSTOM IMPORTS */
import { Locale } from "../../../common/locale";
import { config } from "../../../common/config";
export class GxIdeBpmAssignRoles {
    constructor() {
        this.renderedFirstTime = false;
        // 7.LISTENERS //
        // 8.PUBLIC METHODS API //
        // 9.LOCAL METHODS //
        this.confirmCallbackHandler = () => {
            this.confirmCallback(this.assignedRolesState);
        };
        this.cancelCallbackHandler = () => {
            this.cancelCallback();
        };
        this.handleAssignedCheckedChange = (e) => {
            this.assignedSelected = e.detail[0] && e.detail[0].checked === true;
        };
        this.handleUnassignedCheckedChange = (e) => {
            this.unassignedSelected = e.detail[0] && e.detail[0].checked === true;
        };
        this.handleUnassignedInput = (e) => {
            this.filterUnassignedInput = e.detail;
        };
        this.handleAssignedInput = (e) => {
            this.filterAssignedInput = e.detail;
        };
        this.getCheckedItems = (listBox) => {
            const checkedItems = [];
            const listBoxItems = listBox.querySelectorAll("gxg-list-box-item");
            listBoxItems.forEach((item) => {
                if (item.checked) {
                    checkedItems.push(item.value);
                }
            });
            return checkedItems;
        };
        this.addAll = () => {
            this.assignedRolesState = [
                ...this.assignedRolesState,
                ...this.unassignedRolesState
            ];
            this.unassignedRolesState = [];
        };
        this.addSelectedRoles = () => {
            const checkedItems = this.getCheckedItems(this.unassignedRolesEL);
            if (checkedItems.length) {
                this.unassignedRolesState = this.unassignedRolesState.filter(role => !checkedItems.includes(role));
                this.assignedRolesState = [...this.assignedRolesState, ...checkedItems];
                this.unassignedSelected = false;
            }
        };
        this.removeAll = () => {
            this.unassignedRolesState = [
                ...this.unassignedRolesState,
                ...this.assignedRolesState
            ];
            this.assignedRolesState = [];
        };
        this.removeSelectedRoles = () => {
            const checkedItems = this.getCheckedItems(this.assignedRolesEl);
            if (checkedItems.length) {
                this.assignedRolesState = this.assignedRolesState.filter(role => {
                    return !checkedItems.includes(role);
                });
                this.unassignedRolesState = [
                    ...this.unassignedRolesState,
                    ...checkedItems
                ];
                this.assignedSelected = false;
            }
        };
        this.renderRolesToAdd = () => {
            return (h("div", { class: "roles__list" }, h("gxg-list-box", { checkboxes: true, disabled: false, part: "add-roles-selection", onCheckedChanged: this.handleUnassignedCheckedChange, ref: (el) => (this.unassignedRolesEL = el), noBorder: true, borderBottom: true, borderStart: true, borderEnd: true }, this.unassignedRolesState
                .filter(role => this.filterUnassignedInput.toLowerCase() === "" ||
                role
                    .toLowerCase()
                    .includes(this.filterUnassignedInput.toLowerCase()))
                .map(role => (h("gxg-list-box-item", { value: role, checkbox: true, key: `${role}-${this.assignedRolesState.includes(role)
                    ? "assigned"
                    : "unassigned"}` }, role))))));
        };
        this.renderRolesToRemove = () => {
            return (h("div", { class: "roles__list" }, h("gxg-list-box", { checkboxes: true, disabled: false, part: "remove-roles-selection", onCheckedChanged: this.handleAssignedCheckedChange, ref: (el) => (this.assignedRolesEl = el), noBorder: true, borderBottom: true, borderStart: true, borderEnd: true }, this.assignedRolesState
                .filter(role => this.filterAssignedInput.toLowerCase() === "" ||
                role
                    .toLowerCase()
                    .includes(this.filterAssignedInput.toLowerCase()))
                .map(role => (h("gxg-list-box-item", { value: role, checkbox: true, key: `${role}-${this.assignedRolesState.includes(role)
                    ? "assigned"
                    : "unassigned"}` }, role))))));
        };
        this.unassignedRolesState = [];
        this.assignedRolesState = [];
        this.filterUnassignedInput = "";
        this.filterAssignedInput = "";
        this.unassignedSelected = false;
        this.assignedSelected = false;
        this.displayTitle = false;
        this.roles = undefined;
        this.assignedRoles = undefined;
        this.confirmCallback = undefined;
        this.cancelCallback = undefined;
    }
    // 6.COMPONENT LIFECYCLE METHODS //
    async componentWillLoad() {
        this._componentLocale = await Locale.getComponentStrings(this.el);
        this.unassignedRolesState = this.roles.filter(role => !this.assignedRoles.includes(role));
        this.assignedRolesState = this.assignedRoles;
    }
    componentDidRender() {
        if (!this.renderedFirstTime) {
            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
            this.renderedFirstTime = true;
        }
    }
    // 10.RENDER() FUNCTION //
    render() {
        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { noAboveFooterPadding: true, slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "roles__container" }, h("section", { class: "roles__role" }, h("header", { class: "roles__list-header" }, h("gxg-form-text", { label: this._componentLocale.main.assignRoles.searchRoles, placeholder: this._componentLocale.main.assignRoles.placeholder, labelPosition: "above", clearButton: true, part: "add-roles-filter", class: { "add-roles-filter": true }, onInput: this.handleUnassignedInput }), h("div", { class: "roles__list-title" }, h("gxg-title", { type: "title-04" }, this._componentLocale.main.assignRoles.title), h("gxg-icon", { type: "navigation/chevron-right", color: "mercury-neutral" }))), this.renderRolesToAdd()), h("section", { class: "roles__role" }, h("header", { class: "roles__list-header" }, h("gxg-form-text", { label: this._componentLocale.main.removeRoles.searchRoles, placeholder: this._componentLocale.main.removeRoles.placeholder, labelPosition: "above", clearButton: true, part: "remove-roles-filter", class: { "remove-roles-filter": true }, onInput: this.handleAssignedInput }), h("div", { class: "roles__list-title" }, h("gxg-icon", { type: "navigation/chevron-left", color: "mercury-neutral" }), h("gxg-title", { type: "title-04" }, this._componentLocale.main.removeRoles.title))), this.renderRolesToRemove())), h("footer", { class: "add-remove-buttons", slot: "footer-above" }, h("footer", { class: "add-remove-buttons__add" }, h("gxg-button", { id: "add-all", part: "add-all-roles-btn", onClick: this.addAll, disabled: this.unassignedRolesState.length === 0, type: "secondary-text-only" }, this._componentLocale.main.assignRoles.addAllButton), h("gxg-button", { id: "add-selected", part: "add-selected-roles-btn", onClick: this.addSelectedRoles, disabled: !this.unassignedSelected ||
                !this.unassignedRolesState.length, type: "secondary-text-only" }, this._componentLocale.main.assignRoles.addSelectedButton)), h("footer", { class: "add-remove-buttons__remove" }, h("gxg-button", { id: "add-all", part: "remove-all-roles-btn", onClick: this.removeAll, disabled: this.assignedRolesState.length === 0, type: "secondary-text-only" }, this._componentLocale.main.removeRoles.removeAllButton), h("gxg-button", { id: "add-selected", part: "remove-selected-roles-btn", onClick: this.removeSelectedRoles, disabled: !this.assignedSelected || !this.assignedRolesState.length, type: "secondary-text-only" }, this._componentLocale.main.removeRoles.removeSelectedButton))), h("gxg-button", { type: "outlined", slot: "footer-end", onClick: this.cancelCallbackHandler }, this._componentLocale.footer.cancelButton), h("gxg-button", { slot: "footer-end", onClick: this.confirmCallbackHandler }, this._componentLocale.footer.confirmButton)))));
    }
    static get is() { return "gx-ide-bpm-assign-roles"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["bpm-assign-roles.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bpm-assign-roles.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/bpm-assign-roles"]; }
    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"
            },
            "roles": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Array with all available roles"
                }
            },
            "assignedRoles": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Array with currently assigned roles"
                }
            },
            "confirmCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ConfirmCallback",
                    "resolved": "(assignedRoles: string[]) => Promise<void>",
                    "references": {
                        "ConfirmCallback": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/assign-roles/bpm-assign-roles.tsx",
                            "id": "src/components/bpm/assign-roles/bpm-assign-roles.tsx::ConfirmCallback"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when user confirms assignation"
                }
            },
            "cancelCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "CancelCallback",
                    "resolved": "() => Promise<void>",
                    "references": {
                        "CancelCallback": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/assign-roles/bpm-assign-roles.tsx",
                            "id": "src/components/bpm/assign-roles/bpm-assign-roles.tsx::CancelCallback"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when user cancels assignation"
                }
            }
        };
    }
    static get states() {
        return {
            "unassignedRolesState": {},
            "assignedRolesState": {},
            "filterUnassignedInput": {},
            "filterAssignedInput": {},
            "unassignedSelected": {},
            "assignedSelected": {}
        };
    }
    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": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=bpm-assign-roles.js.map
