import { Host, h } from "@stencil/core";
import { PHONE_MASKS, IDENTITY_MASKS } from "../../../../utils/form-input-masks";
import { deconstructDate } from "../../utils/helpers";
import { heading2, label, inputDisabled, buttonSecondary } from "../../../../styles/parts";
import { CountryCode } from "../../../../utils/country-codes";
import { countryLabels } from "../../utils/country-config";
import { businessTitleOptions } from "../../utils/business-form-options";
export class BusinessRepresentative {
    constructor() {
        this.errors = {};
        this.representative = {};
        this.isEditingIdentification = false;
        this.inputHandler = (name, value) => {
            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { [name]: value }) }));
        };
        this.onAddressFormUpdate = (values) => {
            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { address: Object.assign(Object.assign({}, this.formController.values.getValue().representative.address), values) }) }));
        };
        this.onDateOfBirthUpdate = (event) => {
            const dob_values = deconstructDate(event.detail);
            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { dob_day: dob_values.dob_day, dob_month: dob_values.dob_month, dob_year: dob_values.dob_year }) }));
        };
    }
    get identificationNumberLabel() {
        var _a;
        const label = countryLabels[this.country].idNumberLabel;
        const labelOptional = countryLabels[this.country].idNumberLabelOptional;
        return (((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.country === CountryCode.CAN) ? labelOptional : label;
    }
    componentDidLoad() {
        this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
        this.formController.values.subscribe(values => (this.representative = Object.assign({}, values.representative)));
    }
    render() {
        var _a, _b;
        const representativeDefaultValue = this.formController.getInitialValues().representative;
        return (h(Host, { key: '9045242989e4d43d1e7b0770d0c5421005db78fa' }, h("fieldset", { key: '6643f8bd8e81bbc64ae8a0e9bcf317e16f91bab9' }, h("legend", { key: '20b897584a059ad98c109a37a3ea74c8be4b407c', part: heading2 }, "Representative"), h("div", { key: '37da5bfb73a7606c6180c151761aaf13dcc819c4', class: "row gy-3" }, h("div", { key: '8d76accd442d9fda35ae4d3e1c47b65e17f098a0', class: "col-12 col-md-8" }, h("form-control-text", { key: '2eadd087eac463e851192d8ee1c30390a29ee8b2', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'f495a8cb3c6a0e9b4a00aac3e8c77f66da84b9e2', class: "col-12 col-md-4" }, h("form-control-select", { key: '4b7669b96b7df9a387cf3c4f9638ea9ada9f37ee', name: "title", label: "Title", options: businessTitleOptions, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '3e10f464a7e26a9518b4ce6d37c6f4a968514f98', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a0d51c6999295428bfdcb43ef4b0ec15194eb077', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'a8e1a4c8e4fa5a50d436c18e41a5b77f23bc53cf', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'a72115bf51fc97a25add717c208e820c7e9e5495', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'db04f552f1757b6ac4e10539e4a148f399a75192', class: "col-12 col-md-4" }, h("form-control-date", { key: 'cb07a2cc4e6fc242d643f9caea01db380a9ff366', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '95348511ba3b1582053f754249b15efe4d707252', class: "col-12 col-md-8" }, (!((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: this.isEditingIdentification ? '' : representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, this.identificationNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.representative) === null || _b === void 0 ? void 0 : _b.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
                this.isEditingIdentification = true;
                // Clear last4 and current value to force validation
                this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { ssn_last4: null, identification_number: '' }) }));
            } }, "Change"))))), h("div", { key: '57dcdaad0ec89f94d82236bfc8e093b68b7ec478', class: "col-12" }, h("identity-address-form", { key: '0ea02562077d352c5d3a1d0903dee1e8b69fa6f1', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
    }
    static get is() { return "business-representative"; }
    static get properties() {
        return {
            "formController": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FormController",
                    "resolved": "FormController",
                    "references": {
                        "FormController": {
                            "location": "import",
                            "path": "../../../../components",
                            "id": "src/components.d.ts::FormController"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "country": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "CountryCode",
                    "resolved": "CountryCode.CAN | CountryCode.USA",
                    "references": {
                        "CountryCode": {
                            "location": "import",
                            "path": "../../../../utils/country-codes",
                            "id": "src/utils/country-codes.ts::CountryCode"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "country"
            }
        };
    }
    static get states() {
        return {
            "errors": {},
            "representative": {},
            "isEditingIdentification": {}
        };
    }
}
