import { Host, h } from "@stencil/core";
import { getUserOrders } from "../../api";
import { selectedChatStore } from "../../store/store";
import { handleError } from "../../store/dialog";
import { ZIconButton } from "../internal-component/z-icon-button";
import { Icon } from "../internal-component/icon";
import { useTranslation } from "../../utils/utils";
import { getConnectionId } from "../../utils/func";
export class ProfileOrderSummary {
    el;
    orderList = [];
    isLoading = false;
    disposeListener;
    prevSelectedChat = null;
    async componentWillLoad() {
        this.disposeListener = selectedChatStore.onChange('selectedChat', async (newChat) => {
            if (!newChat) {
                this.orderList = [];
                return;
            }
            if (newChat.id !== (this.prevSelectedChat ? this.prevSelectedChat.id : '')) {
                await this.loadOrders();
                this.prevSelectedChat = newChat;
            }
        });
        if (selectedChatStore.get('selectedChat')) {
            await this.loadOrders();
        }
    }
    disconnectedCallback() {
        if (this.disposeListener)
            this.disposeListener();
    }
    loadOrders = async () => {
        const selectedChat = selectedChatStore.get('selectedChat');
        if (!selectedChat)
            return;
        const type = selectedChat.type === 'group' ? 'group' : 'user';
        if (selectedChat.connection.type !== 'zwiz' || selectedChat.type !== 'user') {
            this.orderList = [];
            return;
        }
        try {
            this.isLoading = true;
            const { channel } = selectedChat;
            const selectedChatType = selectedChat[type];
            const id = selectedChatType ? selectedChatType.id : '';
            const connectionId = getConnectionId();
            if (!connectionId) {
                return;
            }
            this.orderList = await getUserOrders({
                connectionId,
                channel,
                userId: id,
            });
        }
        catch (error) {
            handleError(error, 'Failed to load Orders');
        }
        finally {
            this.isLoading = false;
        }
    };
    render() {
        const t = useTranslation();
        const hasItems = this.orderList.length > 0;
        return (h(Host, { key: '9fe7153ccdb3ba8e9980d3356e31ab04a83d7185' }, h("div", { key: '1b0a8bf17683da322af6f5020a49ba90f7dcac33', class: "profile-order-summary" }, h("div", { key: 'dc88908f33576bdfd2d1b2f7966c4d5fbdee0e7c', class: "flex justify-end mb-2 mr-2 h-6" }, this.isLoading ? (h(Icon, { name: "LoaderCircle", addClass: 'w-5 h-5 mr-1 text-primary animate-spin' })) : (h(ZIconButton, { variant: "text", iconName: "RotateCw", onClick: this.loadOrders }))), !this.isLoading && !hasItems && (h("div", { key: 'e0871f9badaf1725eb59313c59ec0e2dfbf55271', class: "profile-order-summary-empty" }, h("span", { key: 'e00c77f2912db51a944bd7bb1ac2b09fb3bf1c21', class: "text-sm" }, t('chat_profile_view.order_empty')))), hasItems && (h("div", { key: '8dbb16df2efe1f39e67e45e1c50f39648a28e1e8', class: "profile-order-summary-wrapper" }, h("div", { key: 'd381689cd0c30a99adb87b125ec6530a19ec9d0a', class: "profile-order-summary-list" }, this.orderList.map(order => (h("profile-order-card", { order: order, onOrderUpdated: () => this.loadOrders() })))))))));
    }
    static get is() { return "profile-order-summary"; }
    static get originalStyleUrls() {
        return {
            "$": ["profile-order-summary.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["profile-order-summary.css"]
        };
    }
    static get states() {
        return {
            "orderList": {},
            "isLoading": {}
        };
    }
    static get elementRef() { return "el"; }
}
