import { h } from "@stencil/core";
import { displayDateTime } from "../../utils/dayjs";
import { MESSAGE_TYPE } from "../../store/zdesk.type";
import { businessStore } from "../../store/store";
import { ZIconButton } from "../internal-component/z-icon-button";
export class CommentItem {
    comment;
    isReply = false;
    isLastReply = false;
    hasActionParams = false;
    businessUserId;
    focusId;
    replyComment;
    editComment;
    deleteComment;
    openMedia;
    handleAction(action) {
        if (action === 'reply')
            this.replyComment.emit(this.comment);
        if (action === 'edit')
            this.editComment.emit(this.comment);
        if (action === 'delete')
            this.deleteComment.emit(this.comment);
    }
    handleOpenMedia(url) {
        this.openMedia.emit({ url, type: 'image' });
    }
    render() {
        if (!this.comment)
            return null;
        const user = businessStore.get('users').find(item => item.id === this.comment.business_user_id);
        const commentId = this.comment.id;
        const isFocused = this.focusId === commentId;
        return (h("div", { class: `relative ${this.isReply ? 'pl-8 mt-4 reply-item' : ''} ${!this.isLastReply ? 'not-last-reply' : ''}`, key: commentId }, h("div", { class: `comment-card ${isFocused ? 'ring-2 ring-blue-400' : ''}` }, h("div", { class: "flex items-start justify-between mb-2" }, h("div", { class: "flex items-center gap-2" }, h("z-avatar", { size: "small", pictureUrl: user?.avatar_url || "https://dc.zwiz.app/user/450a2571-52e2-4e99-b97f-dbf12d8a53af/upload/Untitled3_znviq17Mgu.png" }), h("div", { class: "flex flex-col" }, h("span", { class: "comment-user-name" }, user?.display_name || user?.user?.username || '-'), h("span", { class: "comment-timestamp" }, displayDateTime(this.comment.created_at)))), this.hasActionParams && (h("div", { class: "flex items-center gap-2" }, !this.isReply && (h(ZIconButton, { variant: "text", iconName: "Reply", addClassIcon: "size-4", noPadding: true, noPaddingY: true, onClick: () => this.handleAction('reply') })), user?.id === this.businessUserId && (h("div", { class: "flex items-center gap-2" }, h(ZIconButton, { variant: "text", iconName: "Pencil", addClassIcon: "size-4", noPadding: true, noPaddingY: true, onClick: () => this.handleAction('edit') }), h(ZIconButton, { variant: "text", iconName: "Trash2", addClassIcon: "size-4", noPadding: true, noPaddingY: true, onClick: () => this.handleAction('delete') })))))), h("div", { class: "comment-content mt-2" }, this.comment.messages?.type === MESSAGE_TYPE.IMAGE ? (h("img", { src: this.comment.messages.url, alt: "attachment", class: "max-w-[200px] rounded-lg cursor-pointer hover:opacity-90 transition-opacity", onClick: () => this.comment.messages?.url && this.handleOpenMedia(this.comment.messages.url) })) : (h("div", { innerHTML: this.comment.messages?.text || '' })))), h("slot", null)));
    }
    static get is() { return "comment-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["comment-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["comment-item.css"]
        };
    }
    static get properties() {
        return {
            "comment": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "BaseComment",
                    "resolved": "BaseComment",
                    "references": {
                        "BaseComment": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/comment-item/comment-item.tsx",
                            "id": "src/components/comment-item/comment-item.tsx::BaseComment"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "isReply": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-reply",
                "defaultValue": "false"
            },
            "isLastReply": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-last-reply",
                "defaultValue": "false"
            },
            "hasActionParams": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-action-params",
                "defaultValue": "false"
            },
            "businessUserId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "business-user-id"
            },
            "focusId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "focus-id"
            }
        };
    }
    static get events() {
        return [{
                "method": "replyComment",
                "name": "replyComment",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "BaseComment",
                    "resolved": "BaseComment",
                    "references": {
                        "BaseComment": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/comment-item/comment-item.tsx",
                            "id": "src/components/comment-item/comment-item.tsx::BaseComment"
                        }
                    }
                }
            }, {
                "method": "editComment",
                "name": "editComment",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "BaseComment",
                    "resolved": "BaseComment",
                    "references": {
                        "BaseComment": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/comment-item/comment-item.tsx",
                            "id": "src/components/comment-item/comment-item.tsx::BaseComment"
                        }
                    }
                }
            }, {
                "method": "deleteComment",
                "name": "deleteComment",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "BaseComment",
                    "resolved": "BaseComment",
                    "references": {
                        "BaseComment": {
                            "location": "local",
                            "path": "/Users/wittawat/Developer/Zwiz.ai/Frontend/zignal-chat/packages/zignal-stencil-library/src/components/comment-item/comment-item.tsx",
                            "id": "src/components/comment-item/comment-item.tsx::BaseComment"
                        }
                    }
                }
            }, {
                "method": "openMedia",
                "name": "openMedia",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{ url: string; type: string }",
                    "resolved": "{ url: string; type: string; }",
                    "references": {}
                }
            }];
    }
}
