import { h, Fragment } from "@stencil/core";
import { ZButton } from "../internal-component/z-button";
import { ZInput } from "../internal-component/z-input";
import { ZDatePicker } from "../internal-component/z-date-picker";
import { Icon } from "../internal-component/icon";
import { t } from "i18next";
import { getZrmzShopProfileSetting } from "../../api/platform";
import { handleError } from "../../store/dialog";
export class SearchFilterZrmz {
    filter;
    shopList = [];
    isShowAdvanced = false;
    zrmzProfile = null;
    filterChange;
    handleToggleAdvanced = () => {
        this.isShowAdvanced = !this.isShowAdvanced;
    };
    async componentWillLoad() {
        if (this.filter?.businessId) {
            await this.getShopProfile(this.filter.businessId);
        }
    }
    handleChange = (field, value) => {
        this.filterChange.emit({
            ...this.filter,
            [field]: value,
        });
    };
    getShopProfile = async (businessId) => {
        if (businessId) {
            try {
                const { result: { shop_profile_setting } } = await getZrmzShopProfileSetting(businessId);
                this.zrmzProfile = shop_profile_setting?.[0];
                return shop_profile_setting?.[0];
            }
            catch (error) {
                handleError(error, 'Failed to get Zrmz Shop Profile');
            }
        }
        else {
            this.zrmzProfile = null;
            return null;
        }
    };
    checkVisible = (field) => {
        if (this.zrmzProfile) {
            return !!this.zrmzProfile[field];
        }
        return false;
    };
    render() {
        const isOnlyCustomers = this.filter ? this.filter.isOnlyCustomers : false;
        const filterZrmz = this.filter;
        const channels = [
            { label: t('chat_filter.all'), value: 'all' },
            { label: 'Facebook', value: 'facebook' },
            { label: 'Line', value: 'line' },
            { label: 'Instagram', value: 'instagram' },
            { label: 'TikTok', value: 'tiktok' },
            { label: 'Shopee', value: 'shopee' },
            { label: 'Lazada', value: 'lazada' },
            { label: 'Line Shopping', value: 'line_shopping' },
            { label: 'Walk-in', value: 'walkin' },
            { label: t('chat_filter.others'), value: 'other' },
        ];
        const zrmzStatus = [
            { label: t('chat_filter.all'), value: 'all' },
            { label: t('chat_filter.pending'), value: 'pending' },
            { label: t('chat_filter.verified'), value: 'verified' },
        ];
        const genders = [
            { label: t('chat_filter.all'), value: 'all' },
            { label: t('chat_filter.male'), value: 'male' },
            { label: t('chat_filter.female'), value: 'female' },
            { label: t('chat_filter.not_specified'), value: 'not-specified' },
        ];
        return (h("div", { key: 'a74b3f8a5bc3eb1afbaa06c586225004fa9ad2d5', class: "zrmz-filter flex flex-col items-start text-surface" }, h("img", { key: '84540718cca4c545564f309955c56c4f13ce2723', src: "https://zwizai-platform.s3.ap-southeast-1.amazonaws.com/zignal-package/zrmz.png", alt: "zrmz", class: "h-[40px] w-auto object-contain self-start", loading: "lazy" }), h("div", { key: '220b4e2a5961f148545958dc4b5da1ed2ea88b44', class: "flex items-center gap-2 w-full" }, h("label", { key: 'd4b89f01e69ca4c570a08a2188f95e7e3f9568be', class: "flex-1 inline-flex items-center gap-2 text-sm mt-1" }, h("input", { key: 'af69e1e2596926a2ce1e01c0dfa07a02b9b869b3', type: "checkbox", class: "search-filter-checkbox", checked: isOnlyCustomers, onChange: () => {
                const newValue = !isOnlyCustomers;
                if (newValue) {
                    this.filterChange.emit({
                        ...this.filter,
                        isOnlyCustomers: true,
                        businessId: null,
                        shopId: null,
                    });
                    this.zrmzProfile = null;
                }
                else {
                    this.handleChange('isOnlyCustomers', false);
                }
            } }), h("span", { key: '7f537751c7b230399bb7af03f9c8dcf752d09a4b', class: "text-surface" }, t('chat_filter.only_customer_zrmz'))), h(ZButton, { key: 'ea968e2ad1ecccdb355e2c6a9ada2be8282ede04', label: t('chat_tab.advance_search'), variant: "text-underline", endIcon: h(Icon, { name: 'Triangle', addClass: `ml-1 size-1.5 fill-current ${this.isShowAdvanced ? 'rotate-0' : 'rotate-180'}` }), disabled: isOnlyCustomers, onClick: this.handleToggleAdvanced })), this.isShowAdvanced && (h("div", { key: '0fd043e8a2b581be95aedc0a2f5fab7aff090ea2', class: "flex flex-col mt-2 w-full gap-1" }, h("z-dropdown-input", { key: '2f246fddabb3fd5d2f7b9bb9550ffcfa0d8ea41b', value: filterZrmz?.businessId, options: this.shopList, onValueChange: async (event) => {
                const isOnlyCustomers = filterZrmz?.isOnlyCustomers ?? false;
                if (event.detail) {
                    const profile = await this.getShopProfile(event.detail);
                    this.filterChange.emit({
                        ...filterZrmz,
                        isOnlyCustomers,
                        businessId: event.detail,
                        shopId: profile?.id || null,
                    });
                }
                else {
                    this.filterChange.emit({
                        ...filterZrmz,
                        isOnlyCustomers,
                        businessId: null,
                        shopId: null,
                    });
                }
            }, placeholder: t('chat_filter.shop_name'), class: "mb-2", enableSearch: false, showClearButton: true, disabled: isOnlyCustomers }), filterZrmz?.businessId && !isOnlyCustomers && (h(Fragment, { key: '3f543853af3011fa11ae181e059d49ca1fb262c2' }, this.checkVisible('is_enable_name_field') && (h(ZInput, { key: 'f50e2b9ca63925998a36277b075070a2c3a57a86', placeholder: t('chat_filter.name'), value: filterZrmz ? filterZrmz.name : '', onChange: value => this.handleChange('name', value), disabled: isOnlyCustomers })), h("div", { key: 'c6a9ab4e2407a182de52b650a83cbcb8785e3a0b', class: "flex w-full gap-2" }, h("div", { key: '98c0a9cd821b689f8ad0bd60e80d20b65c6a8129', class: "flex-1" }, this.checkVisible('is_enable_phone_field') && (h(ZInput, { key: '3a9a3f3c9b4ae158d771d9e9f5455c91824b03f0', placeholder: t('quick_message.button_action_tel'), value: filterZrmz ? filterZrmz.phoneNumber : '', onChange: value => this.handleChange('phoneNumber', value.replaceAll(/[^0-9+]/g, '')), disabled: isOnlyCustomers }))), h("div", { key: '4aefb36b2da06fa9e199a540a3de6827da0d44e2', class: "flex-1" }, this.checkVisible('is_enable_email_field') && (h(ZInput, { key: '5c60211aa0d641197304ead760ee9e6ee6775af8', placeholder: t('email'), value: filterZrmz ? filterZrmz.email : '', onChange: value => this.handleChange('email', value), disabled: isOnlyCustomers })))), this.checkVisible('is_enable_gender_field') && (h("div", { key: '433314bd43886eb913367c111b42e3d9a1831b47', class: "flex w-full gap-2" }, h("div", { key: '3304cbb1a91db8cb4a1cb27b9b57125305aa0ee6', class: "flex-1" }, h("z-dropdown-input", { key: '46b3d4b76cf83a008af4d46bb8c18d5f4cf99e1e', placeholder: t('chat_filter.gender'), value: filterZrmz?.gender, options: genders, onValueChange: event => this.handleChange('gender', event.detail), disabled: isOnlyCustomers, enableSearch: false, showClearButton: true })), h("div", { key: '04e72bd47de7a5e7fe65933eb3e9aa2675c10b69', class: "flex-1" }))), this.checkVisible('is_enable_birth_field') && (h("div", { key: '1f9f84679335599591ed8fa39f170c571466f7d8', class: "w-full" }, h("span", { key: '8fdac37e18fa51c031a4656caa7b3815ddd21668', class: "text-sm mb-1 ml-1 font-medium" }, t('birth_date')), h("div", { key: '29f192d08bf515290a9b041e5e12248e3f71533e', class: "flex w-full gap-2 mt-1" }, h("div", { key: 'ded39c1e4541d4ccdb80328d221a072cc99a8d95', class: "flex-1 " }, h(ZDatePicker, { key: 'd3ac265000bb7b0049ab0c648f1173ad4151bf31', placeholder: t('birth_date_start'), value: filterZrmz?.birthdateStart ?? null, onChange: value => {
                this.handleChange('birthdateStart', value);
                if (value && filterZrmz?.birthdateEnd && value > filterZrmz.birthdateEnd) {
                    this.handleChange('birthdateEnd', value);
                }
            }, disabled: isOnlyCustomers })), h("div", { key: 'aa415d2483d063c0dcb2ca818e1e2fc5db62a31b', class: "flex-1" }, h(ZDatePicker, { key: 'fc4ffb84bcad631c60df9c50053fe58e4ff1f4db', placeholder: t('birth_date_end'), value: filterZrmz?.birthdateEnd ?? null, onChange: value => this.handleChange('birthdateEnd', value), disabled: isOnlyCustomers, min: filterZrmz?.birthdateStart }))))), h("div", { key: 'cd77c7c2ac97abf4a20157bc65cf907b6aa0c7b8', class: "flex w-full gap-2" }, h("div", { key: '6cee350f6420c4fb7d9d67e5a28de98006eb34cb', class: "flex-1" }, h("p", { key: '7311995e94ae001f33d11cb99197165a349925de', class: "text-sm mb-1 ml-1 font-medium" }, t('chat_filter.channel')), h("z-dropdown-input", { key: '95630edd85824116b26bf47bc080938751b7664b', placeholder: t('chat_filter.channel'), value: filterZrmz?.channel, options: channels, onValueChange: event => this.handleChange('channel', event.detail), disabled: isOnlyCustomers, enableSearch: false, showClearButton: true })), h("div", { key: 'd234ac8625515baeab6ea4d75e44f52683a07b3f', class: "flex-1" }, h("p", { key: '569b2ed55a900bb0fabb472d98077c860649a78e', class: "text-sm mb-1 ml-1 font-medium" }, t('chat_filter.status')), h("z-dropdown-input", { key: 'a3234113c007887b233ab1a9f5bea11bd51250b5', placeholder: t('chat_filter.status'), value: filterZrmz?.channelStatus, options: zrmzStatus, onValueChange: event => this.handleChange('channelStatus', event.detail), disabled: isOnlyCustomers, enableSearch: false, showClearButton: true }))), h("div", { key: 'b1dcfb470ad27655ba4c584a5a207020630d1169', class: "flex w-full gap-2 mt-2" }, h("div", { key: '1186d0eff16607a0fc9c2f9bb55e98d1324cdfa6', class: "flex-1" }, h(ZInput, { key: '6751d29329f8b23a4c2d82d945fdf9100d21ee1e', placeholder: t('chat_filter.channel_user'), value: filterZrmz?.channelUser ?? '', onChange: value => this.handleChange('channelUser', value), disabled: isOnlyCustomers })), h("div", { key: 'dd9e858494658c2f0e636e04b06a58492acaca52', class: "flex-1" })), h("p", { key: '33854a52f0c6df2a43fa9aa45d5e35c5cac9c0cf', class: "text-sm mb-1 ml-1 mt-1 font-medium" }, t('chat_filter.total_point')), h("div", { key: '1968cafab429e35ebeedeb4ff4aff5d467670c2e', class: "flex w-full gap-2" }, h("div", { key: '93945a03304a6cf7d632852297590487ac01f998', class: "flex-1" }, h("z-dropdown-input", { key: '47e52adb87e6ac13c5d9390ac53801377a76c57b', placeholder: "Point Type", value: filterZrmz?.totalPointType ?? '', options: [
                { label: t('chat_filter.all'), value: 'all' },
                ...(this.zrmzProfile?.membership_format_value || []).map(p => ({ label: p, value: p }))
            ], onValueChange: event => {
                if (event.detail) {
                    this.handleChange('totalPointType', event.detail);
                }
                else {
                    this.filterChange.emit({
                        ...this.filter,
                        totalPointType: null,
                        totalPointMin: null,
                        totalPointMax: null,
                    });
                }
            }, disabled: isOnlyCustomers, enableSearch: false, showClearButton: true })), h("div", { key: '88eba065e6c1533ff3506046a01859c46f6a93b1', class: "flex-1" }, h(ZInput, { key: '8dec607ad07e887182b191b9cac7552be01ca0f4', type: "number", placeholder: "Min", value: filterZrmz?.totalPointMin?.toString() ?? '', onChange: value => this.handleChange('totalPointMin', value === '' ? null : Math.max(0, Number.parseInt(value))), disabled: isOnlyCustomers || !filterZrmz?.totalPointType, error: (filterZrmz?.totalPointMin && filterZrmz?.totalPointMax && filterZrmz.totalPointMin > filterZrmz.totalPointMax) ? t('chat_filter.min_max_error') : '' })), h("div", { key: '10595dce3bb305bd1d8745e6f5baf0e78d148b08', class: "flex-1" }, h(ZInput, { key: '88119dd89daa4824c0af24bbbf5fec4d9d5bfb10', type: "number", placeholder: "Max", value: filterZrmz?.totalPointMax?.toString() ?? '', onChange: value => this.handleChange('totalPointMax', value === '' ? null : Math.max(0, Number.parseInt(value))), disabled: isOnlyCustomers || !filterZrmz?.totalPointType }))), h("p", { key: 'a20c4778f54d68e6dc8c8ac20f82872bd2714987', class: "text-sm mb-1 ml-1 mt-1 font-medium" }, t('chat_filter.remaining_point')), h("div", { key: '1281fcd570ac0c085e4d93365a609bd7bb64fb2d', class: "flex w-full gap-2" }, h("div", { key: '9eddbf08c445f4e0c916da67f967e481973ddefd', class: "flex-1" }, h("z-dropdown-input", { key: 'e2518f3f67d68b30ef658e878f9dfc6edcd0ec9e', placeholder: "Point Type", value: filterZrmz?.remainingPointType ?? '', options: [
                { label: t('chat_filter.all'), value: 'all' },
                ...(this.zrmzProfile?.membership_format_value || []).map(p => ({ label: p, value: p }))
            ], onValueChange: event => {
                if (event.detail) {
                    this.handleChange('remainingPointType', event.detail);
                }
                else {
                    this.filterChange.emit({
                        ...this.filter,
                        remainingPointType: null,
                        remainingPointMin: null,
                        remainingPointMax: null,
                    });
                }
            }, disabled: isOnlyCustomers, enableSearch: false, showClearButton: true })), h("div", { key: '98de50d422791e5c3bf8a1e8aea36fb93865fd9c', class: "flex-1" }, h(ZInput, { key: 'a9d50ac0fbfb4fbc1a7d0233144f3087a3f56fe4', type: "number", placeholder: "Min", value: filterZrmz?.remainingPointMin?.toString() ?? '', onChange: value => this.handleChange('remainingPointMin', value === '' ? null : Math.max(0, Number.parseInt(value))), disabled: isOnlyCustomers || !filterZrmz?.remainingPointType, error: (filterZrmz?.remainingPointMin && filterZrmz?.remainingPointMax && filterZrmz.remainingPointMin > filterZrmz.remainingPointMax) ? t('chat_filter.min_max_error') : '' })), h("div", { key: 'f3460118c95634d50ad1707e45557e4036ebb3d6', class: "flex-1" }, h(ZInput, { key: '2c7e73d5987cd4fe042e77f48540fb86b47aef3e', type: "number", placeholder: "Max", value: filterZrmz?.remainingPointMax?.toString() ?? '', onChange: value => this.handleChange('remainingPointMax', value === '' ? null : Math.max(0, Number.parseInt(value))), disabled: isOnlyCustomers || !filterZrmz?.remainingPointType }))), this.zrmzProfile?.membership_details?.filter(m => m.enable).length > 0 && (h(Fragment, { key: '9cd6ab57d4756ce9f9196183157ea39deb1b9bf6' }, h("div", { key: 'bcec86af490e41ca9acfa6e11d20a17cdcd410fd', class: "border-t border-divider my-2 w-full" }), h("p", { key: '0358701b31d9d0b3556c3c0d2f351afea2be4217', class: "text-sm mb-1 ml-1 font-medium" }, t('chat_filter.custom_field')), h("div", { key: 'bbb79eed944b60ca3bf5d856c95af0f6905c8b2a', class: "grid grid-cols-2 gap-2 w-full" }, this.zrmzProfile.membership_details.filter(m => m.enable).map(field => (h("div", { key: field.title }, h(ZInput, { placeholder: field.title, value: filterZrmz?.customFields?.[field.title] ?? '', onChange: value => {
                const newCustomFields = filterZrmz?.customFields ? { ...filterZrmz.customFields } : {};
                if (value === '') {
                    delete newCustomFields[field.title];
                }
                else {
                    newCustomFields[field.title] = value;
                }
                this.handleChange('customFields', newCustomFields);
            }, disabled: isOnlyCustomers })))))))))))));
    }
    static get is() { return "search-filter-zrmz"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["search-filter-zrmz.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["search-filter-zrmz.css"]
        };
    }
    static get properties() {
        return {
            "filter": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "NonNullable<SearchChatsParams['zrmz']>",
                    "resolved": "{ isOnlyCustomers?: boolean; businessId?: string; shopId?: string; name?: string; phoneNumber?: string; email?: string; totalPointType?: string; totalPointMin?: number; totalPointMax?: number; remainingPointType?: string; remainingPointMin?: number; remainingPointMax?: number; gender?: string; channel?: string; channelStatus?: string; channelUser?: string; birthdateStart?: string; birthdateEnd?: string; customFields?: Record<string, string>; }",
                    "references": {
                        "NonNullable": {
                            "location": "global",
                            "id": "global::NonNullable"
                        },
                        "SearchChatsParams": {
                            "location": "import",
                            "path": "../../api/type",
                            "id": "src/api/type.ts::SearchChatsParams",
                            "referenceLocation": "SearchChatsParams"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "shopList": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "OptionValue[]",
                    "resolved": "OptionValue[]",
                    "references": {
                        "OptionValue": {
                            "location": "import",
                            "path": "../../components",
                            "id": "src/components.d.ts::OptionValue",
                            "referenceLocation": "OptionValue"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "[]"
            }
        };
    }
    static get states() {
        return {
            "isShowAdvanced": {},
            "zrmzProfile": {}
        };
    }
    static get events() {
        return [{
                "method": "filterChange",
                "name": "filterChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "NonNullable<SearchChatsParams['zrmz']>",
                    "resolved": "{ isOnlyCustomers?: boolean; businessId?: string; shopId?: string; name?: string; phoneNumber?: string; email?: string; totalPointType?: string; totalPointMin?: number; totalPointMax?: number; remainingPointType?: string; remainingPointMin?: number; remainingPointMax?: number; gender?: string; channel?: string; channelStatus?: string; channelUser?: string; birthdateStart?: string; birthdateEnd?: string; customFields?: Record<string, string>; }",
                    "references": {
                        "NonNullable": {
                            "location": "global",
                            "id": "global::NonNullable"
                        },
                        "SearchChatsParams": {
                            "location": "import",
                            "path": "../../api/type",
                            "id": "src/api/type.ts::SearchChatsParams",
                            "referenceLocation": "SearchChatsParams"
                        }
                    }
                }
            }];
    }
}
