import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { f as fullBillingSchema } from './billing-form-schema.js';
import { x as billingForm } from './parts.js';
import { H as Header3 } from './header-3.js';
import './justifi-details2.js';
import './event-types.js';
import './justifi-radio-list-item2.js';
import { d as checkoutBillingStateOptions } from './schema-validations.js';
import { F as FormController } from './form.js';
import { c as checkoutStore, o as onChange } from './checkout.store.js';
import { d as defineCustomElement$4 } from './custom-popper2.js';
import { d as defineCustomElement$3 } from './form-control-select2.js';
import { d as defineCustomElement$2 } from './form-control-text2.js';
import { d as defineCustomElement$1 } from './form-control-tooltip2.js';

const BillingFormFull = /*@__PURE__*/ proxyCustomElement(class BillingFormFull extends HTMLElement {
    constructor(registerHost) {
        super();
        if (registerHost !== false) {
            this.__registerHost();
        }
        this.errors = {};
        this.inputHandler = (name, value) => {
            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
        };
    }
    componentWillLoad() {
        this.formController = new FormController(fullBillingSchema());
        const fields = checkoutStore.billingFormFields;
        if (fields && Object.keys(fields).some((k) => fields[k])) {
            this.formController.setInitialValues(fields);
        }
        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
        this.formController.errors.subscribe(errors => {
            this.errors = Object.assign({}, errors);
        });
    }
    componentDidLoad() {
        this.unsubscribeFromStore = onChange('billingFormFields', (newValue) => {
            this.formController.setInitialValues(newValue);
        });
    }
    disconnectedCallback() {
        var _a;
        (_a = this.unsubscribeFromStore) === null || _a === void 0 ? void 0 : _a.call(this);
    }
    async getValues() {
        return this.formController.values.getValue();
    }
    async validate() {
        const isValid = await this.formController.validate();
        const errors = this.formController.errors.getValue();
        return { isValid, errors };
    }
    render() {
        if (!this.formController) {
            return null;
        }
        const billingFormDefaultValue = this.formController.getInitialValues();
        return (h("div", { part: billingForm, class: "mt-4" }, h(Header3, { text: "Billing address", class: "fs-6 fw-bold lh-lg mb-4" }), h("form", null, h("fieldset", null, this.legend && (h("legend", null, this.legend)), h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-select", { name: 'address_state', label: 'State / Province', options: checkoutBillingStateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: 'address_postal_code', label: "Postal Code", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 7 })))))));
    }
}, [256, "billing-form-full", {
        "legend": [1025],
        "formController": [32],
        "billingInfo": [32],
        "errors": [32],
        "getValues": [64],
        "validate": [64]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["billing-form-full", "custom-popper", "form-control-select", "form-control-text", "form-control-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "billing-form-full":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, BillingFormFull);
            }
            break;
        case "custom-popper":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "form-control-select":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "form-control-text":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "form-control-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { BillingFormFull as B, defineCustomElement as d };
