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: '306f146d583be66036d5b7d770f7d82c9c84226a' }, h("div", { key: 'd1cf6865c79f5e30ad695562092d48e5c28257b8', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'cdc21a795cc92991362567d41ea053244b4dc87b', class: "upload-dialog-content" }, h("div", { key: 'abbc222d421f853e5fcc8614bd4d16248fb22fd1', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '54718ac9d46bc13f96c022a52f527c3454383ee3' }, h("div", { key: '81387ab1ceb1962a94ba5475a2a24316203bae35', class: "current-label" }, "Current Attachment"), h("div", { key: '54053e1a34ab2559fecc51534eec3130606287b5', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '2d5d390d96a0f52196ac54270380969e01b54c52', class: "attachment" }, h("div", { key: 'cc3e5021e989c0b17e07d8c7440aa478f3563212', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '0c32341f9e25013740b526cff1bd7ae4b2a6c2da', class: "name" }, existingFile.name), h("div", { key: '678acb7ec4a54ff404f0ce956daf1dc9eb16fbf5', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: '43feb03a1b3be8c09d57865ef5233c16d707f520', 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: '967aa5e1431e83a1a6477af3ecdac6545cf9106e' }, "Drag and drop your files here"), h("p", { key: 'f6fdc2a5c2ef9d8c3394c86608fff9012f6521d0', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: '3e0d7b45fe0d43d4d082fc16871d69002125b389', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: '90b754371e05c563272fcc667cde5c75cf23b212', 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: '6f95392345e0c0ba776ca45427a3eeb24e86ea4c', 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: 'c302c11758e79265b6624ca64b803a49b05ecdc2', class: "error" }, this.errorMessage), h("div", { key: '70ef293b37d2f59d4a194f103e199f7c3e5aa7bf', class: "buttons" }, h("verdocs-button", { key: '3aca912689dbeac16288acdf97ede66b2fda50cd', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'f96fa3dc4131af6fd49b31115727bb853d3ff7e8', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: '103761442ef22bd730c505115c4cbe69fcbf36dd', 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
