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 { ZInputArea } from "../internal-component/z-input-area";
export class PointUpdatePopup {
    isOpen;
    data;
    pointOptions = [];
    pointConditionOptions = [];
    isLoading;
    popupClose;
    popupSave;
    formDataChange;
    handleFormChange(field, value) {
        const newData = { ...this.data, [field]: value };
        this.formDataChange.emit(newData);
    }
    get isDisabled() {
        const { action, amount, pointType, conditionId } = this.data;
        const isAmountValid = amount && amount !== '';
        if (!isAmountValid) {
            return true;
        }
        if (action === 'condition') {
            return !(conditionId && conditionId !== '');
        }
        return !(pointType && pointType !== '');
    }
    render() {
        const t = useTranslation();
        if (!this.isOpen)
            return null;
        return (h("div", { class: "zrmz-popup-overlay" }, h("div", { class: "zrmz-popup-box zrmz-point-popup" }, h("div", { class: "zrmz-popup-title" }, t('chat_profile_view.zrmz.update_point')), h("div", { class: "zrmz-radio-group" }, h("div", { class: `zrmz-radio-item ${this.data.action === 'add' ? 'selected' : ''}`, onClick: () => this.handleFormChange('action', 'add') }, h("div", { class: "zrmz-radio-circle" }), h("span", null, t('chat_profile_view.zrmz.add_point'))), h("div", { class: `zrmz-radio-item ${this.data.action === 'remove' ? 'selected' : ''}`, onClick: () => this.handleFormChange('action', 'remove') }, h("div", { class: "zrmz-radio-circle" }), h("span", null, t('chat_profile_view.zrmz.remove_point'))), h("div", { class: `zrmz-radio-item ${this.data.action === 'condition' ? 'selected' : ''}`, onClick: () => this.handleFormChange('action', 'condition') }, h("div", { class: "zrmz-radio-circle" }), h("span", null, t('chat_profile_view.zrmz.add_from_condition')))), this.data.action === 'condition' ? (h("div", { class: "zrmz-popup-content" }, h("div", { class: "z-50" }, h("z-dropdown-input", { label: t('chat_profile_view.zrmz.condition_name'), placeholder: t('chat_profile_view.zrmz.select_condition'), value: this.data.conditionId, options: this.pointConditionOptions, enableSearch: false, onValueChange: (e) => this.handleFormChange('conditionId', e.detail) })), h("div", { class: "pt-1" }, h(ZInput, { label: t('chat_profile_view.zrmz.amount'), placeholder: t('chat_profile_view.zrmz.amount'), value: this.data.amount, onChange: (val) => this.handleFormChange('amount', val), type: "number" })))) : (h("div", { class: "zrmz-popup-content flex-row" }, h("div", { class: "flex-1 pt-1" }, h(ZInput, { label: t('chat_profile_view.zrmz.amount'), placeholder: t('chat_profile_view.zrmz.amount'), value: this.data.amount, onChange: (val) => this.handleFormChange('amount', val), type: "number" })), h("div", { class: "flex-1 pt-1" }, h("z-dropdown-input", { label: t('chat_profile_view.zrmz.point_type'), placeholder: t('chat_profile_view.zrmz.point_type'), value: this.data.pointType, options: this.pointOptions, enableSearch: false, onValueChange: (e) => this.handleFormChange('pointType', e.detail) })))), this.data.action !== 'condition' && (h("div", { class: "zrmz-popup-content" }, h(ZInputArea, { label: t('chat_profile_view.zrmz.remark'), placeholder: t('chat_profile_view.zrmz.remark'), value: this.data.note, onChange: (val) => this.handleFormChange('note', val) }))), 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')), disabled: this.isDisabled || this.isLoading, onClick: () => this.popupSave.emit(this.data) })))));
    }
    static get is() { return "point-update-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": "PointEditFormData",
                    "resolved": "PointEditFormData",
                    "references": {
                        "PointEditFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/point-update-popup.tsx",
                            "id": "src/components/profile-zrmz/point-update-popup.tsx::PointEditFormData"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "pointOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "OptionValue[]",
                    "resolved": "OptionValue[]",
                    "references": {
                        "OptionValue": {
                            "location": "import",
                            "path": "../../store/zdesk.type",
                            "id": "src/store/zdesk.type.ts::OptionValue",
                            "referenceLocation": "OptionValue"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "pointConditionOptions": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "OptionValue[]",
                    "resolved": "OptionValue[]",
                    "references": {
                        "OptionValue": {
                            "location": "import",
                            "path": "../../store/zdesk.type",
                            "id": "src/store/zdesk.type.ts::OptionValue",
                            "referenceLocation": "OptionValue"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            },
            "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": "PointEditFormData",
                    "resolved": "PointEditFormData",
                    "references": {
                        "PointEditFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/point-update-popup.tsx",
                            "id": "src/components/profile-zrmz/point-update-popup.tsx::PointEditFormData"
                        }
                    }
                }
            }, {
                "method": "formDataChange",
                "name": "formDataChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "PointEditFormData",
                    "resolved": "PointEditFormData",
                    "references": {
                        "PointEditFormData": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/profile-zrmz/point-update-popup.tsx",
                            "id": "src/components/profile-zrmz/point-update-popup.tsx::PointEditFormData"
                        }
                    }
                }
            }];
    }
}
