import { Host, h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
import { displayDateTime } from "../../utils/dayjs";
import { getConnectionId, getConnectionItem } from "../../utils/func";
import { debounce } from "../../utils/helpers";
import { getBusinessUser } from "./utils";
import { businessStore, selectedChatStore } from "../../store/store";
import { getTicketActivities } from "../../api/zdesk/ticket";
import { handleError } from "../../store/dialog";
import { Icon } from "../internal-component/icon";
import useRegexTranslation from "../../global/useRegexTranslation";
export class ProfileTicketActivities {
    ticketId;
    isLoading = false;
    ticketActivities = [];
    page = 1;
    totalPage = 1;
    hasNextPage = true;
    async componentWillLoad() {
        const selectedChat = selectedChatStore.get('selectedChat');
        if (!selectedChat)
            return;
        await this.loadTicketActivities();
    }
    async loadTicketActivities(reset = false) {
        if (this.isLoading && !reset)
            return; // Prevent concurrent loading unless reset
        if (reset) {
            this.ticketActivities = [];
            this.page = 1;
            this.hasNextPage = true;
        }
        if (!this.hasNextPage)
            return;
        const selectedChat = selectedChatStore.get('selectedChat');
        if (!selectedChat)
            return;
        const connectionItem = getConnectionItem();
        const connectionId = getConnectionId(connectionItem);
        const businessUser = getBusinessUser(connectionItem);
        if (!businessUser)
            return;
        try {
            this.isLoading = true;
            const { data, meta } = await getTicketActivities({ connectionId }, {
                ticket_id: this.ticketId,
                business_id: businessUser.business_id,
                page: this.page
            });
            const newActivities = data.filter(newItem => !this.ticketActivities.some(existingItem => existingItem.id === newItem.id));
            this.ticketActivities = [...this.ticketActivities, ...newActivities];
            this.totalPage = meta.page_count;
            this.hasNextPage = meta.has_next_page;
            this.page++;
        }
        catch (error) {
            handleError(error, 'Failed to load Ticket Activities');
        }
        finally {
            this.isLoading = false;
        }
    }
    handleScroll = debounce((e) => {
        const target = e.target;
        if (target.scrollTop + target.clientHeight >= target.scrollHeight - 50) {
            this.loadTicketActivities();
        }
    }, 200);
    render() {
        const t = useTranslation();
        const rt = useRegexTranslation();
        return (h(Host, { key: '47d154b8abd5ba35dc45f7413dce1e08a46dee69', class: "flex flex-col h-full overflow-hidden" }, h("div", { key: 'dee668f2bef3ae381ff66567f0e9b7256732c8a9', class: "flex-1 overflow-y-auto", onScroll: (e) => this.handleScroll(e) }, h("div", { key: 'ecc631258c18d7cd8ee74b4e0c7de3a6cfb0d335', class: "relative space-y-4 p-4 pl-10" }, this.ticketActivities.map((item, index) => {
            const user = businessStore.get('users').find(user => user.id === item.action_by);
            return (h("div", { key: `history-${index}`, class: "relative" }, h("div", { class: "timeline-dot" }), index !== (this.ticketActivities.length - 1) &&
                h("div", { class: "absolute -left-3 top-6 -bottom-2 w-1 bg-theme-gray/20" }), h("div", { class: "text-sm text-theme-gray mb-2 pl-2" }, displayDateTime(item.created_at)), h("div", { class: "history-card" }, item.action_details && (h("div", { class: "text-surface text-sm mb-2" }, rt(item.action_details))), user
                ? h("div", { class: "flex items-center gap-2 w-fit mt-2" }, h("z-avatar", { pictureUrl: user.avatar_url || "https://dc.zwiz.app/user/450a2571-52e2-4e99-b97f-dbf12d8a53af/upload/Untitled3_znviq17Mgu.png", size: "small" }), h("span", { class: "text-sm text-theme-gray font-medium" }, user.display_name))
                : h("span", { class: "text-sm text-theme-gray font-medium" }, item.action_by))));
        }), this.ticketActivities.length === 0 && !this.isLoading && (h("div", { key: '0ad6c07ab6abe615a57e848c5eb4eb45efb694b2', class: "flex justify-center p-4 text-theme-gray text-sm w-full" }, t('no_data'), " // Assuming translation key exists, or maybe no_data is fine. If invalid, the translation helper might just return 'no_data'.")), this.isLoading && (h("div", { key: '4880e782faea7bdaf55ff86683a529035ca29c42', class: "flex justify-center p-2 text-theme-gray w-full" }, h(Icon, { key: 'd67d2b79b774533f0f921211a7cafc2df5d57b26', name: "Loader2", addClass: "animate-spin size-6" })))))));
    }
    static get is() { return "profile-ticket-activities"; }
    static get originalStyleUrls() {
        return {
            "$": ["profile-ticket-activities.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["profile-ticket-activities.css"]
        };
    }
    static get properties() {
        return {
            "ticketId": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "ticket-id"
            }
        };
    }
    static get states() {
        return {
            "isLoading": {},
            "ticketActivities": {},
            "page": {},
            "totalPage": {},
            "hasNextPage": {}
        };
    }
}
