import { Host, h } from "@stencil/core";
import { preventInputNoneBasicNumber, useTranslation } from "../../utils/utils";
import { deviceModeStore } from "../../store/store";
import { ZButton } from "../internal-component/z-button";
import { ZSelectInput } from "../internal-component/z-select-input";
import { ZInput } from "../internal-component/z-input";
import { getBillEditSchema } from "../../validations/schema";
export class DialogBillEditor {
    defaultData = {
        event_name: 'Purchase',
        value: '',
        currency: 'THB',
        is_create_purchase_order: false
    };
    data = this.defaultData;
    error = null;
    cancel;
    create;
    handleCancel = () => {
        this.data = this.defaultData;
        this.cancel.emit();
    };
    handleCreate = () => {
        this.error = null;
        this.create.emit(this.data);
        this.data = this.defaultData;
    };
    handleSubmit = () => {
        if (this.data.event_name === 'LeadSubmitted') {
            this.data = {
                ...this.data,
                currency: undefined,
                value: 0
            };
            this.handleCreate();
        }
        else {
            const t = useTranslation();
            const validator = getBillEditSchema(t).safeParse(this.data);
            if (!validator.success) {
                this.error = validator.error.issues[0].message;
            }
            else {
                this.handleCreate();
            }
        }
    };
    render() {
        const t = useTranslation();
        return (h(Host, { key: '49f1a966db7083fa888cd8fa09296c5ee765ed35' }, h("div", { key: 'f18979298cf7e80a98edbfcf4470eb4e7c84977c', class: `dialog-bill-editor ${deviceModeStore.get('mode') === 'mobile' ? 'w-xs' : 'w-xl'}` }, h("span", { key: 'aa458b374fdaff0e39ee522c255d6ab05449c119', class: "dialog-bill-editor-title" }, "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E04\u0E33\u0E02\u0E2D\u0E01\u0E32\u0E23\u0E0A\u0E33\u0E23\u0E30\u0E40\u0E07\u0E34\u0E19\u0E1A\u0E19 Conversion Value of Purchase"), h("br", { key: 'e363bc7d2dbbef267e5469dcc99b8849c710bd61' }), h("span", { key: '11c7cd2080b12d119c69eee237c931b422da55a7', class: "text-surface" }, "\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E01\u0E32\u0E23\u0E0A\u0E33\u0E23\u0E30\u0E40\u0E07\u0E34\u0E19\u0E19\u0E35\u0E49\u0E08\u0E30\u0E41\u0E2A\u0E14\u0E07\u0E43\u0E19 Conversion Value of Purchase \u0E43\u0E19\u0E2A\u0E48\u0E27\u0E19\u0E02\u0E2D\u0E07 Facebook page \u0E02\u0E2D\u0E07\u0E17\u0E48\u0E32\u0E19"), h("div", { key: '055c190bc096de082bdc2292c91d09188484955a', class: "my-2" }, h(ZSelectInput, { key: '7847c56a52d056cb390c332ac95c5b4c72591b9a', label: t('event'), options: [
                { label: t('View Content'), value: 'ViewContent' },
                { label: t('Add to Cart'), value: 'AddToCart' },
                { label: t('Purchase'), value: 'Purchase' },
                { label: t('Lead Submitted'), value: 'LeadSubmitted' },
            ], value: this.data.event_name, onChange: value => this.data = { ...this.data, event_name: value } })), this.data.event_name !== 'LeadSubmitted' &&
            h("div", { key: 'e4be1f15f705cd68a015b1379a840aaceb2d8d95', class: "dialog-bill-editor-amount-wrapper" }, h("div", { key: 'd6727b7edcd753f9ddb462b1c88a3e93e87ff195', class: "col-span-2" }, h(ZInput, { key: '4c2e8f72202e52d0d51f2a2381f086986ec57626', label: t('amount'), value: this.data.value, type: 'number', onChange: value => this.data = { ...this.data, value: value }, onKeyDown: (event) => preventInputNoneBasicNumber(event), error: this.error })), h(ZSelectInput, { key: '901090a765f0b27e46d6d62f60a701477e217f2c', label: t('currency'), options: [
                    { label: 'THB', value: 'THB' },
                    { label: 'USD', value: 'USD' },
                ], value: this.data.currency, onChange: value => this.data = { ...this.data, currency: value } })), this.data.event_name === 'Purchase' &&
            h("label", { key: '88a4ca92f4d6b5b103ae8024e06d79da48d63b6d', class: "checkbox-list mb-2" }, h("input", { key: '0d0a3b6ae452c6cca4c929304e79e3d38e689747', type: "checkbox", checked: this.data.is_create_purchase_order, onChange: event => this.data = { ...this.data, is_create_purchase_order: event.target.checked } }), h("span", { key: 'c66f6d7cd48326c30399e644b0533eab327ca999', class: "dialog-bill-editor-auto-create-order" }, "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E2D\u0E2D\u0E40\u0E14\u0E2D\u0E23\u0E4C\u0E2D\u0E31\u0E15\u0E42\u0E19\u0E21\u0E31\u0E15\u0E34")), h("div", { key: '3ff98022b22896a6f1e71c83bb2d9e8bdd940088', class: "dialog-bill-editor-action-wrapper" }, h(ZButton, { key: 'fc9546e8168bed2715f9ecf48283710aca98634e', label: t('cancel'), variant: "outlined", fullWidth: true, onClick: this.handleCancel }), h(ZButton, { key: '1a0271e594ebe55d17e41d5ee9a899fa0c30cb33', label: t('create'), fullWidth: true, onClick: this.handleSubmit })))));
    }
    static get is() { return "dialog-bill-editor"; }
    static get originalStyleUrls() {
        return {
            "$": ["dialog-bill-editor.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dialog-bill-editor.css"]
        };
    }
    static get states() {
        return {
            "data": {},
            "error": {}
        };
    }
    static get events() {
        return [{
                "method": "cancel",
                "name": "cancel",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "create",
                "name": "create",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "BillingItem",
                    "resolved": "{ id?: string; event_name: BillingItemEvent; value?: string | number; currency?: string; is_create_purchase_order?: boolean; }",
                    "references": {
                        "BillingItem": {
                            "location": "import",
                            "path": "../../store/type",
                            "id": "src/store/type.ts::BillingItem",
                            "referenceLocation": "BillingItem"
                        }
                    }
                }
            }];
    }
}
