import { h, Fragment, Host } from "@stencil/core";
const TrashIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>`;
const PaperclipIcon = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" /></svg>`;
/**
 * Display a file upload tool. Note that the file is not actually transmitted, so it may be used by
 * callers with a variety of workflows. Instead, data about the chosen file will be passed to the
 * caller via the onNext event handler. A delete event is also exposed to delete existing attachments.
 * To represent an existing attachment, set the existingFile property.
 */
export class VerdocsUploadDialog {
    constructor() {
        this.maxSize = 20 * 1024 * 1024;
        this.draggingOver = false;
        this.confirmDelete = false;
        this.selectedFiles = [];
        this.errorMessage = '';
    }
    handleCancel() {
        this.exit.emit();
    }
    // We need a separate event handler for clicking the background because it can receive events "through" other child components
    handleDismiss(e) {
        if (e.target.class === 'background-overlay') {
            e.preventDefault();
            this.handleCancel();
        }
    }
    handleDone() {
        this.next.emit(this.selectedFiles);
    }
    handleDragOver(e) {
        e.preventDefault();
        this.draggingOver = true;
    }
    handleDragLeave(e) {
        e.preventDefault();
        this.draggingOver = false;
    }
    async handleDrop(e) {
        e.preventDefault();
        this.draggingOver = false;
        this.handleSetSelected(Array.from(e.dataTransfer.files));
    }
    handleRemoveAttachment(index) {
        const newFiles = [...this.selectedFiles];
        newFiles.splice(index, 1);
        this.handleSetSelected(newFiles);
    }
    handleSetSelected(files) {
        this.selectedFiles = files;
        this.errorMessage = '';
        const totalSize = this.selectedFiles.reduce((acc, file) => acc + file.size, 0);
        if (totalSize > this.maxSize) {
            this.errorMessage = 'Total file size must not exceed 20MB.';
        }
    }
    handleDeleteAttachment(e) {
        var _a;
        // Stop the parent from seeing "next" and thinking an upload was done.
        // TODO: Rethink having so many commonalities in nested dialogs (next/exit).
        e.preventDefault();
        e.stopPropagation();
        (_a = this.remove) === null || _a === void 0 ? void 0 : _a.emit();
        this.existingFile = null;
        this.confirmDelete = false;
    }
    handleSelectFile() {
        var _a;
        (_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.click();
    }
    async handleFileChange() {
        var _a, _b, _c;
        const selectedFiles = Array.from((_a = this.fileInput) === null || _a === void 0 ? void 0 : _a.files);
        let droppedFiles = [];
        for (let i = 0; i < ((_b = this.fileInput) === null || _b === void 0 ? void 0 : _b.files.length); i++) {
            droppedFiles.push((_c = this.fileInput) === null || _c === void 0 ? void 0 : _c.files[i]);
        }
        this.handleSetSelected(selectedFiles);
    }
    render() {
        var _a;
        const existingFile = ((_a = this.existingFile) === null || _a === void 0 ? void 0 : _a.name) ? this.existingFile : null;
        return (h(Host, { key: 'b0ca14d225224dc98ff46c735847be4f8ff36155' }, h("div", { key: '13ad83fbd408d00cf1d3d1fba05362383d2f36b0', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '12f13a44a2ad5f1407d4d36abdb83ab751e02b2e', class: "upload-dialog-content" }, h("div", { key: '676e2e2092353ceda44485db36edbcb6767546fa', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '14943f2b22e74951436b699d89d33b4d8ca99a5c' }, h("div", { key: '5dadc3d739cd21e81bc5e996437e194619696dd4', class: "current-label" }, "Current Attachment"), h("div", { key: 'f6d4fb430de57ed9adccba460b9541e2ecdde0d9', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '3486b50484212f5eb0f2e35f05a4033ff2e1b0d9', class: "attachment" }, h("div", { key: 'd707be82662dc5a7d384b99400e2df272ec4fbbf', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '76e19b6731810e6752f71a1ff669e2295d71668c', class: "name" }, existingFile.name), h("div", { key: '8dc091a9a6e3e2be166053d5195d065f7cce9ce9', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'ccea1346643e7fe2080a182af8f31bc664078452', class: { 'drop-target': true, 'dragging-over': this.draggingOver }, onDragOver: e => this.handleDragOver(e), onDragLeave: e => this.handleDragLeave(e), onDrop: e => this.handleDrop(e) }, h("p", { key: '14654e7541b12e697d10093c1937facc28245b7c' }, "Drag and drop your files here"), h("p", { key: '88d3d5ac4dc17c9069c1142ebec938862360173d', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: 'c0d92b3e17290915cff67eb61473650c9db19760', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: 'c60de9aad07084407784a7ae78ab135a90c49682', type: "file", ref: el => (this.fileInput = el), style: { display: 'none' }, accept: ".pdf,application/pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/*", onChange: () => this.handleFileChange() }))), this.selectedFiles.length > 0 && (h("div", { key: '42735af0b120ff7b514e95dbddffe11797cb8944', class: "attachments" }, this.selectedFiles.map((file, index) => (h("div", { class: "attachment" }, h("div", { class: "icon", innerHTML: PaperclipIcon }), h("div", { class: "name" }, file.name), h("div", { class: "icon trash", innerHTML: TrashIcon, onClick: () => this.handleRemoveAttachment(index) })))))), !!this.errorMessage && h("div", { key: 'fb4827e70e10544a824a1de78b19995bf8e9363e', class: "error" }, this.errorMessage), h("div", { key: '35556df182bda0c72640359b6f99f4216fc65593', class: "buttons" }, h("verdocs-button", { key: 'd257d0348d01d5ef4650c28619e360af551240a4', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'a796fb19b3c5f13f04a276e0c6a3280ff4e4ae6d', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: 'b93d666429e9e3bf2c1e2040504afec9cbddff13', heading: "Delete Attachment?", message: "Are you sure you wish to delete this attachment? This action cannot be undone.", showCancel: true, onExit: e => {
                // So we don't close the upload dialog
                e.preventDefault();
                e.stopPropagation();
                this.confirmDelete = false;
            }, onNext: e => this.handleDeleteAttachment(e) }))));
    }
    static get is() { return "verdocs-upload-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-upload-dialog.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-upload-dialog.css"]
        };
    }
    static get properties() {
        return {
            "maxSize": {
                "type": "number",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "max-size",
                "defaultValue": "20 * 1024 * 1024"
            },
            "existingFile": {
                "type": "any",
                "mutable": true,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "existing-file"
            }
        };
    }
    static get states() {
        return {
            "draggingOver": {},
            "confirmDelete": {},
            "selectedFiles": {},
            "errorMessage": {}
        };
    }
    static get events() {
        return [{
                "method": "exit",
                "name": "exit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the step is cancelled. This is called exit to avoid conflicts with the JS-reserved \"cancel\" event name."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "next",
                "name": "next",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the dialog is closed. The event data will contain the file selected."
                },
                "complexType": {
                    "original": "File[]",
                    "resolved": "File[]",
                    "references": {
                        "File": {
                            "location": "global",
                            "id": "global::File"
                        }
                    }
                }
            }, {
                "method": "remove",
                "name": "remove",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when an existing attachment is deleted. The parent component is\nresponsible for the actual removal."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-upload-dialog.js.map
