import { h } from "@stencil/core";
import { ZButton } from "../internal-component/z-button";
import { ZInput } from "../internal-component/z-input";
import { Icon } from "../internal-component/icon";
import { useTranslation } from "../../utils/utils";
import { isValidTelephoneNumber, isValidEmail } from "../../utils/validators";
import { ZInputArea } from "../internal-component/z-input-area";
export class AdminRegisterPopup {
    isOpen;
    data;
    registerType;
    isEditButtonPopupOpen = false;
    tempButtonName = '';
    popupClose;
    popupSave;
    formDataChange;
    // Watch for prop changes to update state
    handleFormChange(field, value) {
        const newData = { ...this.data, [field]: value };
        this.formDataChange.emit(newData);
    }
    handleEditButtonOpen = () => {
        this.tempButtonName = this.data.buttonName;
        this.isEditButtonPopupOpen = true;
    };
    handleEditButtonClose = () => {
        this.isEditButtonPopupOpen = false;
    };
    handleEditButtonSave = () => {
        this.handleFormChange('buttonName', this.tempButtonName);
        this.isEditButtonPopupOpen = false;
    };
    renderEditButtonPopup() {
        const t = useTranslation();
        if (!this.isEditButtonPopupOpen)
            return null;
        return (h("div", { class: "zrmz-popup-overlay" }, h("div", { class: "zrmz-popup-box" }, h("div", { class: "zrmz-popup-title" }, "\u0E1B\u0E38\u0E48\u0E21\u0E01\u0E14"), h("div", { class: "zrmz-popup-content" }, h(ZInput, { value: this.tempButtonName, onChange: (val) => (this.tempButtonName = val) })), h("div", { class: "zrmz-popup-actions" }, h(ZButton, { variant: "outlined", label: t('cancel'), onClick: this.handleEditButtonClose }), h(ZButton, { label: t('save'), onClick: this.handleEditButtonSave })))));
    }
    render() {
        const t = useTranslation();
        if (!this.isOpen)
            return null;
        const { registerType } = this;
        const isShowPhoneField = registerType === 'phone' || registerType === 'email_and_phone';
        const isShowEmailField = !registerType || registerType === 'email' || registerType === 'email_and_phone';
        const hasPhone = !!this.data.phoneNumber;
        const hasEmail = !!this.data.email;
        // Exclusivity logic
        const isExclusive = registerType === 'email_and_phone';
        const isPhoneDisabled = isExclusive && hasEmail;
        const isEmailDisabled = isExclusive && hasPhone;
        // Validation logic
        const isPhoneValid = !isShowPhoneField || !this.data.phoneNumber || isValidTelephoneNumber(this.data.phoneNumber);
        const isEmailValid = !isShowEmailField || !this.data.email || isValidEmail(this.data.email);
        let isRequiredFilled = false;
        if (registerType === 'phone') {
            isRequiredFilled = hasPhone;
        }
        else if (registerType === 'email' || !registerType) {
            isRequiredFilled = hasEmail;
        }
        else { // email_and_phone
            isRequiredFilled = hasPhone || hasEmail;
        }
        const isFormValid = isPhoneValid && isEmailValid && isRequiredFilled;
        return (h("div", { class: "zrmz-popup-overlay" }, this.renderEditButtonPopup(), h("div", { class: "zrmz-popup-box" }, h("div", { class: "zrmz-popup-title" }, t('chat_profile_view.zrmz.register')), h("div", { class: "zrmz-popup-content" }, isShowPhoneField && (h("z-phone-input", { label: t('chat_profile_view.zrmz.phone_number'), value: this.data.phoneNumber, countryCallingCode: this.data.callingCode, onTextChange: (val) => this.handleFormChange('phoneNumber', val.detail), onCountryChange: (val) => this.handleFormChange('callingCode', val.detail), error: !isPhoneValid && this.data.phoneNumber ? t('validator.invalid_phone') : undefined, disabled: isPhoneDisabled })), isShowEmailField && (h(ZInput, { label: t('chat_profile_view.zrmz.email'), value: this.data.email, onChange: (val) => this.handleFormChange('email', val), error: !isEmailValid && this.data.email ? t('validator.invalid_email') : undefined, disabled: isEmailDisabled })), h("div", { class: "flex items-center gap-2 cursor-pointer pt-2", onClick: () => this.handleFormChange('isSendLoginLink', !this.data.isSendLoginLink) }, h("div", { class: `w-5 h-5 rounded border flex items-center justify-center ${this.data.isSendLoginLink ? 'bg-primary border-primary' : 'border-divider'}` }, this.data.isSendLoginLink && h(Icon, { name: "Check", addClass: "text-white size-3" })), h("span", { class: "text-sm text-surface" }, t('chat_profile_view.zrmz.send_link_to_chat'))), h("div", { class: "border rounded-lg p-4 mt-2 border-primary" }, h("div", { class: "mb-4" }, h(ZInputArea, { value: this.data.buttonTitle, onChange: (val) => this.handleFormChange('buttonTitle', val) })), h("div", { class: "bg-primary text-white text-center py-2 mt-2 rounded-lg font-medium relative overflow-hidden cursor-pointer hover:opacity-90 transition-opacity", onClick: this.handleEditButtonOpen }, this.data.buttonName, h("div", { class: "text-xs opacity-70 mt-1 truncate px-2" }, this.data.buttonLink)))), h("div", { class: "zrmz-popup-actions" }, h(ZButton, { variant: "outlined", label: t('cancel'), onClick: () => this.popupClose.emit() }), h(ZButton, { label: t('save'), onClick: () => this.popupSave.emit(this.data), disabled: !isFormValid })))));
    }
    static get is() { return "admin-register-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": "AdminRegisterFormData",
                    "resolved": "AdminRegisterFormData",
                    "references": {
                        "AdminRegisterFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/admin-register-popup.tsx",
                            "id": "src/components/profile-zrmz/admin-register-popup.tsx::AdminRegisterFormData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "registerType": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "register-type"
            }
        };
    }
    static get states() {
        return {
            "isEditButtonPopupOpen": {},
            "tempButtonName": {}
        };
    }
    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": "AdminRegisterFormData",
                    "resolved": "AdminRegisterFormData",
                    "references": {
                        "AdminRegisterFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/admin-register-popup.tsx",
                            "id": "src/components/profile-zrmz/admin-register-popup.tsx::AdminRegisterFormData"
                        }
                    }
                }
            }, {
                "method": "formDataChange",
                "name": "formDataChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "AdminRegisterFormData",
                    "resolved": "AdminRegisterFormData",
                    "references": {
                        "AdminRegisterFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/admin-register-popup.tsx",
                            "id": "src/components/profile-zrmz/admin-register-popup.tsx::AdminRegisterFormData"
                        }
                    }
                }
            }];
    }
}
