import { library } from '@fortawesome/fontawesome-svg-core';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { h } from "@stencil/core";
import { File } from '../../utils/file';
library.add(faTrash);
export class BceUploadInput {
    constructor() {
        this.value = '';
        this.labelUploadButton = 'Upload';
        this.labelDeleteButton = 'Delete';
        this.uploaded = false;
        this.ignoreInput = (event) => {
            event.cancelBubble = true;
        };
        this.handleFileUpload = (event) => {
            event.cancelBubble = true;
            const [file] = event.detail;
            this.uploaded = true;
            this.value = `BCE://${file.id}/${file.name}`;
            this.file.emit(new File(file.id, file.name, this.value, file.blob));
        };
        this.handleFileDelete = (event) => {
            event.cancelBubble = true;
            this.delete();
        };
    }
    componentWillLoad() {
        this.watchValue(this.value);
    }
    watchValue(value) {
        this.uploaded = value.startsWith('BCE://');
    }
    async upload() {
        if (this.uploaded)
            return;
        const query = 'bce-upload-button button';
        const el = this.el.querySelector(query);
        if (el)
            el.click();
    }
    async delete() {
        if (!this.uploaded)
            return;
        const match = this.value.match(/BCE:\/\/([^/]+)\//);
        if (match)
            this.fileDelete.emit({ id: match[1], path: this.value });
        this.uploaded = false;
        this.value = '';
    }
    renderButton() {
        return !this.uploaded ? (h("bce-upload-button", { onFile: this.handleFileUpload, onInput: this.ignoreInput, accept: this.accept }, this.labelUploadButton)) : (h("bce-button", { type: "text", icon: "fas:trash", onClick: this.handleFileDelete }, this.labelDeleteButton));
    }
    render() {
        return [
            this.renderButton(),
            h("bce-input", { type: "text", value: this.value, disabled: this.uploaded, placeholder: this.placeholder })
        ];
    }
    static get is() { return "bce-upload-input"; }
    static get originalStyleUrls() { return {
        "$": ["bce-upload-input.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-upload-input.css"]
    }; }
    static get properties() { return {
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false,
            "defaultValue": "''"
        },
        "placeholder": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "placeholder",
            "reflect": false
        },
        "accept": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "accept",
            "reflect": true
        },
        "labelUploadButton": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-upload-button",
            "reflect": false,
            "defaultValue": "'Upload'"
        },
        "labelDeleteButton": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-delete-button",
            "reflect": false,
            "defaultValue": "'Delete'"
        }
    }; }
    static get states() { return {
        "uploaded": {}
    }; }
    static get events() { return [{
            "method": "file",
            "name": "file",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "File",
                "resolved": "File",
                "references": {
                    "File": {
                        "location": "import",
                        "path": "../../utils/file"
                    }
                }
            }
        }, {
            "method": "fileDelete",
            "name": "file-delete",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "{ id: string; path: string }",
                "resolved": "{ id: string; path: string; }",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "upload": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "HTMLButtonElement": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "delete": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "watchValue"
        }]; }
}
