import { h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { ZButton } from "../internal-component/z-button";
import { Icon } from "../internal-component/icon";
import { ZInput } from "../internal-component/z-input";
import { isValidEmail, isValidTelephoneNumber } from "../../utils/validators";
export class CustomerInfoEditPopup {
    isOpen;
    data;
    saveEnabled = true;
    isLoading;
    popupClose;
    popupSave;
    formDataChange;
    handleInputChange(field, value) {
        const newData = { ...this.data, [field]: value };
        this.formDataChange.emit(newData);
    }
    render() {
        const t = useTranslation();
        if (!this.isOpen)
            return null;
        const isPhoneValid = this.data.phoneNumber ? isValidTelephoneNumber(this.data.phoneNumber) : true;
        const isEmailValid = this.data.email ? isValidEmail(this.data.email) : true;
        return (h("div", { class: "zrmz-popup-overlay" }, h("div", { class: "zrmz-popup-box" }, h("div", { class: "zrmz-popup-title" }, t('chat_profile_view.zrmz.edit_customer_info')), h("div", { class: "zrmz-popup-content" }, h("div", { class: "flex gap-2" }, h("div", { class: "flex-1" }, h(ZInput, { label: t('chat_profile_view.zrmz.first_name'), value: this.data.firstName, onChange: (val) => this.handleInputChange('firstName', val) })), h("div", { class: "flex-1" }, h(ZInput, { label: t('chat_profile_view.zrmz.last_name'), value: this.data.lastName, onChange: (val) => this.handleInputChange('lastName', val) }))), h("z-phone-input", { label: t('chat_profile_view.zrmz.phone_number'), value: this.data.phoneNumber, countryCallingCode: this.data.callingCode, onTextChange: (val) => this.handleInputChange('phoneNumber', val.detail), onCountryChange: (val) => this.handleInputChange('callingCode', val.detail), error: !isPhoneValid ? t('validator.invalid_phone') : undefined }), h(ZInput, { label: t('chat_profile_view.zrmz.email'), value: this.data.email, onChange: (val) => this.handleInputChange('email', val), error: !isEmailValid ? t('validator.invalid_email') : undefined })), h("div", { class: "zrmz-popup-actions" }, h(ZButton, { variant: "outlined", label: t('cancel'), onClick: () => this.popupClose.emit() }), h(ZButton, { label: this.isLoading ? (h("div", { class: "flex items-center gap-2" }, h(Icon, { name: "Loader2", addClass: "animate-spin size-4" }), t('save'))) : (t('save')), onClick: () => this.popupSave.emit(), disabled: !this.saveEnabled || this.isLoading || !isPhoneValid || !isEmailValid })))));
    }
    static get is() { return "customer-info-edit-popup"; }
    static get originalStyleUrls() {
        return {
            "$": ["profile-zrmz.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["profile-zrmz.css"]
        };
    }
    static get properties() {
        return {
            "isOpen": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-open"
            },
            "data": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "CustomerInfoEditFormData",
                    "resolved": "CustomerInfoEditFormData",
                    "references": {
                        "CustomerInfoEditFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/customer-info-edit-popup.tsx",
                            "id": "src/components/profile-zrmz/customer-info-edit-popup.tsx::CustomerInfoEditFormData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "saveEnabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "save-enabled",
                "defaultValue": "true"
            },
            "isLoading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-loading"
            }
        };
    }
    static get events() {
        return [{
                "method": "popupClose",
                "name": "popupClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "popupSave",
                "name": "popupSave",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "formDataChange",
                "name": "formDataChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "CustomerInfoEditFormData",
                    "resolved": "CustomerInfoEditFormData",
                    "references": {
                        "CustomerInfoEditFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/customer-info-edit-popup.tsx",
                            "id": "src/components/profile-zrmz/customer-info-edit-popup.tsx::CustomerInfoEditFormData"
                        }
                    }
                }
            }];
    }
}
