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: 'acec8b275ba9b532b0e7d8edd7f532da9ff8a49b' }, h("div", { key: '3bc096ddbe51bc9c4f88bacf560bfdaecc7d722a', class: "background-overlay", onClick: e => this.handleDismiss(e) }, h("div", { key: 'ccf7d549b3649ae55f2f43b6cd81cbcd6ff24f81', class: "upload-dialog-content" }, h("div", { key: '04f0d9e18619ca8a5e92197ba15625ab26bd6660', class: "heading" }, "Upload attachment"), this.selectedFiles.length < 1 && existingFile && (h(Fragment, { key: '424808e3f2ca8cd2cb0c1e95c6770bbd18589a7b' }, h("div", { key: '86b98d6d6dc8393a4e8b9c6944c805a708fdd92d', class: "current-label" }, "Current Attachment"), h("div", { key: '2ed4f3c1e61e78d886ffd4b7993fa3fa20924035', class: "attachments", style: { marginTop: '0' } }, h("div", { key: '2a484327598c4e1965469cc12fe857fa8efa5bc3', class: "attachment" }, h("div", { key: '805e4a64333e7178cf4366c69ad420ee7a0bac2d', class: "icon", innerHTML: PaperclipIcon }), h("div", { key: '69d049b071152f45d744a88510159cc35cdb812e', class: "name" }, existingFile.name), h("div", { key: 'fa122173588c5c5f98acf6c15c8bdae423da63bd', class: "icon trash", innerHTML: TrashIcon, onClick: () => (this.confirmDelete = true) }))))), this.selectedFiles.length < 1 && !existingFile && (h("div", { key: 'f1b11fe5a57cb11d63f957880195e27b09ec0722', 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: '7328834713c5bb0dfdf4104ec2bb4fd87d1fdc08' }, "Drag and drop your files here"), h("p", { key: '1b5aefb7b4326f7fe84a0e47e2a57aeaec8ffb6b', class: "subscript" }, "Supported files: PDF, Word, JPG, PNG"), h("verdocs-button", { key: '250ebb61a127b4165035b763ecf463300981c5cd', label: !!existingFile ? 'Replace files' : 'Select files', onClick: () => this.handleSelectFile() }), h("input", { key: '184654378febda7abbe3487cc96c116990d91854', 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: 'bae3de8954a39b7786d541fff3f1e2fda812e99e', 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: '9600b241b7b8b8688a63265f6cc62c0f51a28a77', class: "error" }, this.errorMessage), h("div", { key: 'c24ba70a3dbf0bb0a27f157b9f4de52c13c9a6bd', class: "buttons" }, h("verdocs-button", { key: 'a7cbe8bdcc65e440ef3991804742c470dba36196', label: "Cancel", variant: "outline", onClick: () => this.handleCancel() }), h("verdocs-button", { key: '02c46ae6497af108e7d5331da4b7787cf1b7e9dd', label: "Upload", onClick: () => this.handleDone(), disabled: !!this.errorMessage || this.selectedFiles.length < 1 })))), this.confirmDelete && (h("verdocs-ok-dialog", { key: '9955376ca5523b74177263e2f9f144c540213555', 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
