import { Host, h, } from "@stencil/core";
import { FormControlErrorText } from "../../ui-components";
import { input, inputDisabled, inputFocused, inputInvalid, label } from "../../styles/parts";
export class FormControlFile {
    constructor() {
        this.isFocused = false;
        this.errorText = '';
        this.inputHandler = () => { };
        this.disabled = false;
        this.handleFormControlInput = (event) => {
            const target = event.target;
            const name = target.getAttribute('name');
            this.inputHandler(name, target.value);
            this.formControlInput.emit({ name, value: target.value });
        };
        this.changeHandler = () => {
            const inputFileList = this.fileInput.files;
            if (inputFileList) {
                this.fileSelected.emit({
                    fileList: inputFileList,
                    document_type: this.documentType
                });
            }
        };
    }
    componentDidLoad() {
        this.fileInput = this.el.querySelector('input');
    }
    get part() {
        let part = input;
        if (this.errorText) {
            part = inputInvalid;
        }
        if (this.disabled) {
            part = inputDisabled;
        }
        if (this.isFocused) {
            part = inputFocused;
        }
        return part;
    }
    render() {
        return (h(Host, { key: '9463f54c8850245de8d3ae92a45447fe8d2ce329' }, h("div", { key: 'fec5946a226ef5c270514e6b1f8a95de60d6bcb0', class: "form-group d-flex flex-column" }, h("div", { key: '95783cbeab704b1b970af6619191667991814e73', class: "d-flex align-items-start gap-2" }, h("label", { key: 'c258720ecba808fcf18d3408569b4e391ca0e31f', part: label, class: "form-label", htmlFor: this.name }, this.label), h("form-control-tooltip", { key: '280b23806bc9616506eb56025318b5c6fe395762', helpText: this.helpText })), h("input", { key: '2fcdd1ad6c923de9b28587ee3d1349d0fdf021eb', ref: (el) => this.fileInput = el, type: "file", name: this.name, part: this.part, class: this.errorText ? "form-control is-invalid" : "form-control", multiple: this.multiple, disabled: this.disabled, onChange: this.changeHandler, onInput: this.handleFormControlInput, onFocus: () => this.isFocused = true, onBlur: () => {
                this.isFocused = false;
                this.formControlBlur.emit();
            } }), h(FormControlErrorText, { key: 'df64bb1a0ac921da01fa8a4c3b63a8f5880781d2', errorText: this.errorText, name: this.name }))));
    }
    static get is() { return "form-control-file"; }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "name": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "helpText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "help-text"
            },
            "errorText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error-text",
                "defaultValue": "''"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple"
            },
            "documentType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "EntityDocumentType",
                    "resolved": "EntityDocumentType.articlesOfIncorporation | EntityDocumentType.balanceSheet | EntityDocumentType.bankStatement | EntityDocumentType.birthCertificate | EntityDocumentType.businessRegistration | EntityDocumentType.citizenshipCard | EntityDocumentType.driverLicense | EntityDocumentType.foreignPassport | EntityDocumentType.governmentId | EntityDocumentType.nexusCard | EntityDocumentType.other | EntityDocumentType.passport | EntityDocumentType.profitAndLossStatement | EntityDocumentType.residentCard | EntityDocumentType.sinCard | EntityDocumentType.ssnCard | EntityDocumentType.statusCard | EntityDocumentType.taxReturn | EntityDocumentType.voidedCheck",
                    "references": {
                        "EntityDocumentType": {
                            "location": "import",
                            "path": "../../api/Document",
                            "id": "src/api/Document.ts::EntityDocumentType"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "document-type"
            },
            "inputHandler": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(name: string, value: string) => void",
                    "resolved": "(name: string, value: string) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "() => { }"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "files": {},
            "fileString": {},
            "isFocused": {}
        };
    }
    static get events() {
        return [{
                "method": "formControlInput",
                "name": "formControlInput",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "formControlBlur",
                "name": "formControlBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "fileSelected",
                "name": "fileSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "FileSelectEvent",
                    "resolved": "FileSelectEvent",
                    "references": {
                        "FileSelectEvent": {
                            "location": "import",
                            "path": "../../api/Document",
                            "id": "src/api/Document.ts::FileSelectEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
