var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _FileItem_handleNameChange, _FileItem_handleBlur, _FileItem_handleDelete, _FileItem_handleCancelClick, _FileItem_startEditing;
import { h } from "@stencil/core";
import { getIconPath } from "@genexus/mercury";
const FILE_ICON = getIconPath({
    category: "gemini-tools",
    name: "file",
    colorType: "primary"
});
const EDIT_ICON = getIconPath({
    category: "gemini-tools",
    name: "edit",
    colorType: "primary"
});
const DELETE_ICON = getIconPath({
    category: "gemini-tools",
    name: "delete",
    colorType: "primary"
});
const CANCEL_ICON = getIconPath({
    category: "gemini-tools",
    name: "close",
    colorType: "primary"
});
const CSS_BUNDLES = [
    "resets/box-sizing",
    "components/button",
    "components/icon",
    "components/edit",
    "utils/typography",
    "utils/spacing",
    "utils/form",
    "utils/layout",
    "utils/elevation"
];
export class FileItem {
    constructor() {
        _FileItem_handleNameChange.set(this, (event) => {
            const newName = event.detail;
            if (newName && newName !== this.currentName) {
                this.currentName = newName;
                this.fileNameChange.emit({
                    id: this.file.id,
                    name: newName
                });
            }
        });
        _FileItem_handleBlur.set(this, () => {
            this.isEditing = false;
        });
        /** Handles file deletion */
        _FileItem_handleDelete.set(this, () => {
            this.fileDelete.emit(this.file.id);
        });
        /** Handles upload cancellation */
        _FileItem_handleCancelClick.set(this, (e) => {
            e.preventDefault();
            this.fileCancel.emit(this.file.id);
        });
        /** Starts file name editing */
        _FileItem_startEditing.set(this, () => {
            if (this.editable) {
                this.isEditing = true;
            }
        });
        this.file = undefined;
        this.editable = false;
        this.componentLocale = undefined;
        this.fileDeletedCallback = undefined;
        this.fileDeletionErrorCallback = undefined;
        this.isEditing = false;
        this.currentName = undefined;
    }
    /** Updates current name when file prop changes */
    handleFileChange(newFile) {
        this.currentName = newFile.name;
    }
    componentWillLoad() {
        this.currentName = this.file.name;
    }
    render() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
        const displayItemActions = !this.file.pending;
        const displayProgressContainer = this.file.pending;
        const labelId = "progress-label-" + this.file.id;
        let liAriaLabel;
        if (this.file.pending) {
            liAriaLabel = ((_d = (_c = (_b = (_a = this.componentLocale) === null || _a === void 0 ? void 0 : _a.fileItem) === null || _b === void 0 ? void 0 : _b.uploadingAriaLabel) === null || _c === void 0 ? void 0 : _c.replace("{fileName}", this.currentName)) === null || _d === void 0 ? void 0 : _d.replace("{fileProgress}", this.file.progress.toString())) || this.currentName;
        }
        else if (this.file.remoteId) {
            liAriaLabel = ((_g = (_f = (_e = this.componentLocale) === null || _e === void 0 ? void 0 : _e.fileItem) === null || _f === void 0 ? void 0 : _f.uploadedSuccessfullyAriaLabel) === null || _g === void 0 ? void 0 : _g.replace("{fileName}", this.currentName)) || this.currentName;
        }
        else {
            liAriaLabel = this.currentName;
        }
        return (h("li", { class: {
                "file-item": true,
                "file-item--without-actions": !displayItemActions,
                "file-item--with-actions": displayItemActions
            }, "aria-label": liAriaLabel }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "file-item__icon" }, h("ch-image", { disabled: !this.file.pending, src: FILE_ICON, class: "icon-m" })), h("div", { class: "file-item__name" }, this.isEditing ? (h("ch-edit", { accessibleName: (_k = (_j = (_h = this.componentLocale) === null || _h === void 0 ? void 0 : _h.fileItem) === null || _j === void 0 ? void 0 : _j.editNamePlaceholderAriaLabel) === null || _k === void 0 ? void 0 : _k.replace("{fileName}", this.currentName), value: this.currentName, autoFocus: true, onInput: __classPrivateFieldGet(this, _FileItem_handleNameChange, "f"), onBlur: __classPrivateFieldGet(this, _FileItem_handleBlur, "f"), class: "input", id: labelId })) : (h("span", { class: "label", id: labelId }, this.currentName))), displayItemActions ? (h("div", { class: "file-item__actions" }, !this.file.pending && this.editable && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_startEditing, "f") }, h("ch-image", { src: EDIT_ICON, class: "icon-m" }))), !this.file.pending && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleDelete, "f"), "aria-label": "Delete file" }, h("ch-image", { src: DELETE_ICON, class: "icon-m" }))))) : (null), displayProgressContainer && (h("div", { class: "file-item__progress-container" }, h("div", { class: "file-item__progress-header" }, h("span", { class: "file-item__uploading-text typography-body-italic-s" }, "Uploading ", this.currentName, "..."), h("button", { "aria-label": ((_o = (_m = (_l = this.componentLocale) === null || _l === void 0 ? void 0 : _l.fileItem) === null || _m === void 0 ? void 0 : _m.cancelUploadButtonAriaLabel) === null || _o === void 0 ? void 0 : _o.replace("{fileName}", this.currentName)) || "Cancel upload", class: "button-tertiary button-icon-only file-item__cancel-upload", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleCancelClick, "f") }, h("ch-image", { src: CANCEL_ICON, class: "icon-m" }))), h("div", { class: "file-item__progress-bar" }, h("progress", { class: "elevation-1", value: this.file.progress, max: "100", "aria-labelledby": labelId }))))));
    }
    static get is() { return "gx-ide-file-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["file-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["file-item.css"]
        };
    }
    static get properties() {
        return {
            "file": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FileUploadState",
                    "resolved": "FileUploadState",
                    "references": {
                        "FileUploadState": {
                            "location": "import",
                            "path": "../types",
                            "id": "src/components/file-uploader/types.ts::FileUploadState"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "File state containing upload information"
                }
            },
            "editable": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Whether the file name can be edited"
                },
                "attribute": "editable",
                "reflect": false,
                "defaultValue": "false"
            },
            "componentLocale": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Component locale strings"
                },
                "attribute": "component-locale",
                "reflect": false
            },
            "fileDeletedCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(fileId: string) => Promise<void>",
                    "resolved": "(fileId: string) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Callback when a file is deleted"
                }
            },
            "fileDeletionErrorCallback": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>",
                    "resolved": "(data: { fileName: string; error: string; }) => Promise<void>",
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Callback when a file deletion error occurs"
                }
            }
        };
    }
    static get states() {
        return {
            "isEditing": {},
            "currentName": {}
        };
    }
    static get events() {
        return [{
                "method": "fileNameChange",
                "name": "fileNameChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the file name is changed"
                },
                "complexType": {
                    "original": "{ id: string; name: string }",
                    "resolved": "{ id: string; name: string; }",
                    "references": {}
                }
            }, {
                "method": "fileDelete",
                "name": "fileDelete",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the file is deleted"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "fileCancel",
                "name": "fileCancel",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the file upload is cancelled"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "file",
                "methodName": "handleFileChange"
            }];
    }
}
_FileItem_handleNameChange = new WeakMap(), _FileItem_handleBlur = new WeakMap(), _FileItem_handleDelete = new WeakMap(), _FileItem_handleCancelClick = new WeakMap(), _FileItem_startEditing = new WeakMap();
//# sourceMappingURL=file-item.js.map
