/* 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 { filesToListItemsData } from "./helpers";
export class GxIdeTemplate {
    constructor() {
        this.renderedFirstTime = false;
        // 7.LISTENERS //
        // 8.PUBLIC METHODS API //
        // 9.LOCAL METHODS //
        this.fileSelectionChangedHandler = (selectedItem) => {
            this.selectionChanged.emit();
            const selectedFiles = Array.isArray(selectedItem.detail)
                ? selectedItem.detail
                : [selectedItem.detail];
            this.selectedFiles = selectedFiles.map(item => item.itemValue);
        };
        this.loadFileHandle = async () => {
            this.fileInput.click();
        };
        this.handleFileInputChange = (event) => {
            const fileInput = event.target;
            if (fileInput.files && fileInput.files.length > 0) {
                const newFiles = Array.from(fileInput.files);
                const uniqueFiles = newFiles.filter(newFile => !this.files.some(existingFile => existingFile.name === newFile.name));
                this.files = [...this.files, ...uniqueFiles];
            }
            this.fileInput.value = null;
        };
        this.confirmCallbackHandle = async () => {
            if (this.confirmCallback && this.files.length > 0) {
                const data = {
                    automaticBackup: this.automaticBackupEl.value === "true",
                    files: this.files
                };
                await this.confirmCallback(data);
            }
        };
        this.removeFiles = (filesToRemove) => {
            this.files = this.files.filter(file => !filesToRemove.includes(file.name));
            this.selectedFiles = [];
            this.fileInput.value = null;
        };
        this.handleRemoveButtonClick = () => {
            this.removeFiles(this.selectedFiles);
        };
        this.files = [];
        this.selectedFiles = [];
        this.displayTitle = false;
        this.allowedExtensions = undefined;
        this.confirmCallback = undefined;
        this.cancelCallback = undefined;
    }
    // 6.COMPONENT LIFECYCLE METHODS //
    async componentWillLoad() {
        this._componentLocale = await Locale.getComponentStrings(this.el);
    }
    componentDidRender() {
        if (!this.renderedFirstTime) {
            this.componentDidRenderFirstTime.emit(this._componentLocale.componentName);
            this.renderedFirstTime = true;
        }
    }
    // 10.RENDER() FUNCTION //
    render() {
        var _a;
        return (h(Host, { class: "gx-ide-component" }, h("div", { class: "gx-ide-main-wrapper" }, h("gx-ide-container", { slimmerFooter: config.gxIdeContainer.slimmerFooter }, h("div", { class: "main" }, h("div", { class: "controls-wrapper controls-wrapper--vertical" }, h("label", { htmlFor: "path-list" }, this._componentLocale.main.listLabel), h("gx-ide-list-selector", { id: "path-list", type: "multi-selection", listName: "path-list", ordered: true, onSelectionChanged: this.fileSelectionChangedHandler, class: "path-list" }, renderListItems(filesToListItemsData(this.files)))), h("div", { class: "footer" }, h("div", { class: "checkbox-container" }, h("ch-checkbox", { id: "automatic-backup", accessibleName: this._componentLocale.main.automaticBackupLabel, checkedValue: "true", unCheckedValue: "false", value: "checked", ref: (el) => (this.automaticBackupEl = el) }), h("label", { htmlFor: "automatic-backup" }, this._componentLocale.main.automaticBackupLabel)), h("div", { class: "controls-wrapper" }, h("input", { type: "file", id: "input_file", accept: (_a = this.allowedExtensions) === null || _a === void 0 ? void 0 : _a.join(", "), ref: el => (this.fileInput = el), onChange: this.handleFileInputChange, class: "hidden-input", multiple: true }), h("button", { onClick: this.loadFileHandle }, this._componentLocale.main.addFilesButton), h("button", { onClick: this.handleRemoveButtonClick, disabled: this.selectedFiles.length === 0 }, this._componentLocale.main.removeFilesButton, " (", this.selectedFiles.length, ")")))), h("button", { slot: "footer-end", onClick: this.confirmCallbackHandle }, this._componentLocale.footer.confirmButton), h("button", { slot: "footer-end", onClick: this.cancelCallback }, this._componentLocale.footer.cancelButton)))));
    }
    static get is() { return "gx-ide-bpm-import-files"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["bpm-import-files.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bpm-import-files.css"]
        };
    }
    static get assetsDirs() { return ["gx-ide-assets/bpm-import-files"]; }
    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"
            },
            "allowedExtensions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "string[]",
                    "resolved": "string[]",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Allowed extensions when 'Add files' button is pressed"
                }
            },
            "confirmCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(data: ImportData) => Promise<boolean>",
                    "resolved": "(data: ImportData) => Promise<boolean>",
                    "references": {
                        "ImportData": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/bpm/import-files/bpm-import-files.tsx",
                            "id": "src/components/bpm/import-files/bpm-import-files.tsx::ImportData"
                        },
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when user press 'OK' button"
                }
            },
            "cancelCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => Promise<void>",
                    "resolved": "() => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Callback invoked when user press 'Cancel' button."
                }
            }
        };
    }
    static get states() {
        return {
            "files": {},
            "selectedFiles": {}
        };
    }
    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": {}
                }
            }, {
                "method": "selectionChanged",
                "name": "selectionChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "description",
                            "text": "Gets fired when something changes on items section."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=bpm-import-files.js.map
