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: 'afb8059122df5f070ae3ded2cbc5fd402ddf4c30' }, h("div", { key: '0acdbe273ac24e4026e1d21637eedc45b04096ff', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '8714ae9328f8acfc08b1cfddacaf160ff1ba27f4', class: "upload-dialog-content" }, h("div", { key: 'c26e45a11d45f80517ea5862af39e0cafb534523', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '34eccf225b38f37cb542d6bea63a792a61e5c2e4' }, h("div", { key: '19bc692a2a352a60448481f5fab214a9a733d560', class: "current-label" }, "Current Attachment"), h("div", { key: '18ec31779f257a11303dca40508eb6af155e94ae', class: "attachments", style: { marginTop: '0' } }, h("div", { key: 'f282e58bac16e5cf2ddcecd5969ce314c5747e92', class: "attachment" }, h("div", { key: '9dcafcd10b951a0b2ed7756feb5b1d60dd7ccc97', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '95e6448c10b17130eef74cb3f88236764e4ff94d', class: "name" }, existingFile.name), h("div", { key: '70b3fa880b75d0ec311e29660ee482b47427f41e', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: '53ba2d4e6a992c69996001137e36db16f527868b', 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: '1a2326c8f41cf429ea8d206531118762f68eb37b' }, "Drag and drop your files here"), h("p", { key: 'bf4153d3624e0cca52ce3499c5d6a8009d0eb909', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: '411c2e054887771ebfb1ebcd192247d51a011d65', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: 'ff57cbb18b9c9852bb09b7e82303768d52690caa', 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: '4560c6fbd51be1e385081d0e5da1b5f028a2fe4c', 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: '496b1953cce011c1be512ae704b86a99b672ef32', class: "error" }, this.errorMessage), h("div", { key: '1fe1a4d1879c7d97e2cb0613aed65eb4f6134319', class: "buttons" }, h("verdocs-button", { key: '3d5b3360099b341ffa3873a723523b237b5fd99c', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'aa176cfae4504f73adb79eb55b6cebe369f0e509', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: '7e05ca66affc86277df7e10efda054121a8f5787', 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
