import { Host, h } from "@stencil/core";
import { handleGetChatFilters, handleSelectChatFilter } from "../../store/chat";
import { customFiltersStore, filterChatsStore } from "../../store/store";
import { Icon } from "../internal-component/icon";
import { useTranslation } from "../../utils/utils";
export class DialogCustomFilter {
    initial;
    edit;
    add;
    close;
    filterSelect;
    componentWillLoad() {
        this.init();
    }
    async init() {
        if (filterChatsStore.get('filterType') !== 'custom') {
            customFiltersStore.set('selectedFilter', null);
        }
        await handleGetChatFilters();
        const filters = customFiltersStore.get('filters');
        if (filters.length == 0) {
            this.initial.emit();
        }
    }
    onSelectFilter(filter) {
        this.filterSelect.emit(filter);
        handleSelectChatFilter(filter);
        this.close.emit();
    }
    render() {
        const filters = customFiltersStore.get('filters');
        const loading = customFiltersStore.get('loading');
        const t = useTranslation();
        return (h(Host, { key: '23020a0fb62ef17e3993e24205fa8f67a9ae29b9' }, h("div", { key: '53cc4d68657180f1aa75ee8bc4d22020aa7f3e18', class: "dialog-custom-filter" }, h("div", { key: '94ff70212f0546b32f940fcba294d9cba16fb1af', class: "dialog-toolbar-action" }, h("div", { key: '04cf0308cda04eb143c1e789cba787c297e819df', class: "dialog-toolbar-action-wrapper " }, h("button", { key: '47c2ac2d456f31a26763b059ff7bec14c4652182', onClick: () => this.initial.emit(), class: "cursor-pointer" }, h("span", { key: '1255c7175796d38eaf8605477c88c031a28e4899', class: "text-sm text-primary underline" }, t('chat_tab.advance_search'))))), h("p", { key: '98924aae7089022b9f7850c7a61477ae8b480290', class: "dialog-title text-surface" }, t('chat_filter.custom_filter')), h("p", { key: '86bb91f098b8bd35fd04d61c91df5967ddecaa3d', class: "text-xs text-surface" }, t('chat_filter.select_filter_to_search')), h("div", { key: '0d1a34b97057de96cafbcd269edb8e17e33c0b44', class: "dialog-content" }, loading ? (h("div", { class: "flex items-center justify-center" }, h(Icon, { name: "Loader2", addClass: "size-5 animate-spin text-primary" }))) : filters.length > 0 ? (filters.map((filter) => {
            const customFilter = customFiltersStore.get('selectedFilter');
            const customFilterId = customFilter ? customFilter.id : '';
            const isSelected = filter.id === customFilterId;
            return h("div", { class: `flex w-full px-4 py-2 border-b border-divider text-sm text-primary cursor-pointer hover:bg-primary/10 ${isSelected ? 'bg-primary/10' : ''}`, onClick: () => this.onSelectFilter(filter) }, h("p", { class: "flex-1 truncate mr-2" }, t('chat_filter.filter'), ":\u00A0", filter.name), h("button", { class: "cursor-pointer", onClick: (e) => { e.stopPropagation(); this.edit.emit(filter); } }, h(Icon, { name: "Edit", addClass: "size-4 text-surface hover:text-primary" })));
        })) : (h("div", { class: "flex items-center justify-center mt-4" }, h("p", { class: "text-sm text-surface" }, t('chat_filter.no_filter'))))))));
    }
    static get is() { return "dialog-custom-filter"; }
    static get originalStyleUrls() {
        return {
            "$": ["dialog-custom-filter.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dialog-custom-filter.css"]
        };
    }
    static get events() {
        return [{
                "method": "initial",
                "name": "initial",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "edit",
                "name": "edit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "ChatFilter",
                    "resolved": "{ id: string; name: string; search?: string; read?: boolean; type?: \"user\" | \"group\"; connections?: FilterConnection[]; last_answer_by_ids?: string[]; status_ids?: string[]; tag_ids?: string[]; total_completed_verify_slip?: number; total_completed_verify_slip_more_than?: number; created_at?: string; updated_at?: string; }",
                    "references": {
                        "ChatFilter": {
                            "location": "import",
                            "path": "../../api/type",
                            "id": "src/api/type.ts::ChatFilter",
                            "referenceLocation": "ChatFilter"
                        }
                    }
                }
            }, {
                "method": "add",
                "name": "add",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "close",
                "name": "close",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "filterSelect",
                "name": "filterSelect",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "ChatFilter",
                    "resolved": "{ id: string; name: string; search?: string; read?: boolean; type?: \"user\" | \"group\"; connections?: FilterConnection[]; last_answer_by_ids?: string[]; status_ids?: string[]; tag_ids?: string[]; total_completed_verify_slip?: number; total_completed_verify_slip_more_than?: number; created_at?: string; updated_at?: string; }",
                    "references": {
                        "ChatFilter": {
                            "location": "import",
                            "path": "../../api/type",
                            "id": "src/api/type.ts::ChatFilter",
                            "referenceLocation": "ChatFilter"
                        }
                    }
                }
            }];
    }
}
