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: '37019e65e3678fd2fda6fc76ad1fd084370d4dd2' }, h("div", { key: '2e022cea886003176481dbc5a5b65f85a90899c1', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: '1eba05144b20b261c1e8412422d0ace7ca733837', class: "upload-dialog-content" }, h("div", { key: '13889dd135d492a3594b328f7aac810184e6c440', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '9f71a0e4fcea989cfa022a31b53bb75ee101a3c7' }, h("div", { key: '5f32f521bf926d10dd54e21dfd0e51c9769e9521', class: "current-label" }, "Current Attachment"), h("div", { key: '6efc67cd33ec59739cd9bb662068cde1746b3f54', class: "attachments", style: { marginTop: '0' } }, h("div", { key: 'cfeb96af884c241c8f4f08eb062713d9a10afd08', class: "attachment" }, h("div", { key: '4803928bb8715c9eaaf41e0f6f830e52a4e327f6', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '73ee71cefb3a5bc53af71bd2e7e5952efdffa873', class: "name" }, existingFile.name), h("div", { key: 'cf8a4f4987cec34797041e949667f023e9c081e8', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: '91f4a8ada6be5e2356ef60b4104bf113df032649', 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: '690447f95f197253112d3b442740a88012b911a2' }, "Drag and drop your files here"), h("p", { key: '68ee7aadffa25607ec386dfa227ee226222bfcd3', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: '58e2896056a8a6b8df9bab6cda6f1b7e4c38f516', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: '4f7adf48fb522c3314e1f916c93d4ce1fb45bb31', 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: '62bd209a8de7f04b30867d96fd05e93720deb8f8', 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: '92941081056165d02f90758440ca76870ffedfd0', class: "error" }, this.errorMessage), h("div", { key: '9fff882458c0f468895deccc9fa0b728c21db28b', class: "buttons" }, h("verdocs-button", { key: '594871814e2bc1302326d51cf2fdf819ad3c062a', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: 'e2cbf1f3a5522d11aa81408f3d7e4ca174f24287', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: '57efdb3582e8a2be5175d642de71dcc9d532c72c', 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",
                "attribute": "max-size",
                "mutable": true,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "20 * 1024 * 1024"
            },
            "existingFile": {
                "type": "any",
                "attribute": "existing-file",
                "mutable": true,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    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
