import { VerdocsEndpoint } from "@verdocs/js-sdk";
import { h, Host } from "@stencil/core";
import { unicodeNBSP } from "../../../utils/Icons";
/**
 * Displays a file picker to upload an attachment. This component is just the picker - the host application or component should
 * provide the actual upload functionality.
 *
 * ```ts
 * <verdocs-file-chooser onFileSelected={(e) => console.log('File Selected', e.detail)} />
 * ```
 */
export class VerdocsFileChooser {
    constructor() {
        /**
         * The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used.
         */
        this.endpoint = VerdocsEndpoint.getDefault();
    }
    handleFileChanged(e) {
        var _a, _b;
        this.file = ((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || null;
        (_b = this.fileSelected) === null || _b === void 0 ? void 0 : _b.emit({ file: this.file });
        console.debug('[CHOOSER] Selected file', this.file);
    }
    handleSelectFile(e) {
        var _a, _b;
        e.stopPropagation();
        this.file = null;
        (_a = this.fileSelected) === null || _a === void 0 ? void 0 : _a.emit({ file: null });
        (_b = document.getElementById('verdocs-file-chooser')) === null || _b === void 0 ? void 0 : _b.click();
    }
    render() {
        const buttonlabel = this.file ? 'Select a different file' : 'Select a file from your computer';
        return (h(Host, { key: '2f3b44d27df1f14697939673b9706f2b8cef2b1c' }, h("input", { key: '3c55f234ad08dc6741505f8314361eee94014829', type: "file", multiple: true, id: "verdocs-file-chooser", accept: "application/pdf,.pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document", style: { display: 'none' }, onChange: e => this.handleFileChanged(e) }), h("div", { key: 'bda957db5c55a91f240a501f714671973fe493e7', class: "upload-box" }, h("div", { key: 'c772d366c2d0cf10930bd04c6fe2cf9639ae187d', class: "selected-filename" }, this.file ? this.file.name : 'Drag a file here'), h("div", { key: '1d4ab1025dcd4685be52f0440d0910d5e78e6a8e', class: "or-prefer" }, this.file ? unicodeNBSP : 'Or, if you prefer...'), h("verdocs-button", { key: 'a2385786f50aa9e298eea13dfadb3072fb2fad34', label: buttonlabel, size: "small", onClick: e => this.handleSelectFile(e) }))));
    }
    static get is() { return "verdocs-file-chooser"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-file-chooser.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-file-chooser.css"]
        };
    }
    static get properties() {
        return {
            "endpoint": {
                "type": "unknown",
                "attribute": "endpoint",
                "mutable": false,
                "complexType": {
                    "original": "VerdocsEndpoint",
                    "resolved": "VerdocsEndpoint",
                    "references": {
                        "VerdocsEndpoint": {
                            "location": "import",
                            "path": "@verdocs/js-sdk",
                            "id": "node_modules::VerdocsEndpoint"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
                },
                "getter": false,
                "setter": false,
                "defaultValue": "VerdocsEndpoint.getDefault()"
            }
        };
    }
    static get states() {
        return {
            "file": {}
        };
    }
    static get events() {
        return [{
                "method": "fileSelected",
                "name": "fileSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when a file has been selected. Note that the file may be null if the user is choosing a different file.\nHost applications should use this event to enable/disable buttons to upload or otherwise process the selected file."
                },
                "complexType": {
                    "original": "{file: File | null}",
                    "resolved": "{ file: File; }",
                    "references": {
                        "File": {
                            "location": "global",
                            "id": "global::File"
                        }
                    }
                }
            }];
    }
}
//# sourceMappingURL=verdocs-file-chooser.js.map
