import { Host, h } from "@stencil/core";
import { businessStore } from "../../store/store";
import { ZButton } from "../internal-component/z-button";
import { ZInputArea } from "../internal-component/z-input-area";
export class ProfileTicketAssignDialog {
    ticket;
    isOpen = false;
    close;
    submitAssign;
    selectedGroup = '';
    selectedAdmin = '';
    comment = '';
    isFollowing = false;
    handleBackdropClick = (e) => {
        e.stopPropagation();
        this.handleClose();
    };
    handleContainerClick = (e) => {
        e.stopPropagation();
    };
    handleClose = (e) => {
        if (e)
            e.stopPropagation();
        this.close.emit();
    };
    handleSubmit = (e) => {
        if (e)
            e.stopPropagation();
        this.submitAssign.emit({
            business_group_id: this.selectedGroup,
            business_user_id: this.selectedAdmin,
            comment: this.comment,
            isFollowing: this.isFollowing,
        });
    };
    handleGroupChange = (groupId) => {
        this.selectedGroup = groupId;
        this.selectedAdmin = ''; // Reset admin when group changes
    };
    handleAdminChange = (adminId) => {
        this.selectedAdmin = adminId;
    };
    render() {
        if (!this.isOpen || !this.ticket)
            return null;
        const { groups, users } = businessStore.state;
        let adminOptions = [];
        if (this.selectedGroup) {
            const selectedGroupObj = groups.find(g => g.id === this.selectedGroup);
            if (selectedGroupObj && selectedGroupObj.business_group_users) {
                // Map from business_group_users when a group is selected
                adminOptions = selectedGroupObj.business_group_users
                    .map(bgu => {
                    // Find the full user details to get display name
                    const fullUser = users.find(u => u.id === bgu.business_user_id);
                    if (!fullUser)
                        return null;
                    return {
                        id: fullUser.id,
                        name: fullUser.display_name || fullUser.user?.first_name || fullUser.user?.username || '-',
                    };
                })
                    .filter(Boolean); // Remove nulls
            }
        }
        else {
            // If no group is selected, show all users
            adminOptions = users.map(u => ({
                id: u.id,
                name: u.display_name || u.user?.first_name || u.user?.username || '-',
            }));
        }
        // Filter out the current assignee
        adminOptions = adminOptions.filter(admin => admin.id !== this.ticket.business_user_id);
        const groupOptions = groups.map(g => ({ id: g.id, name: g.name }));
        return (h(Host, null, h("div", { class: "dialog-backdrop", onClick: this.handleBackdropClick }, h("div", { class: "dialog-container bg-white rounded-lg shadow-lg w-[400px] max-w-[90vw] overflow-hidden", onClick: this.handleContainerClick }, h("div", { class: "p-6 pb-4" }, h("h2", { class: "text-xl font-bold mb-6 text-surface" }, "\u0E21\u0E2D\u0E1A\u0E2B\u0E21\u0E32\u0E22\u0E17\u0E34\u0E01\u0E40\u0E01\u0E47\u0E15 #", this.ticket.id), h("div", { class: "space-y-4" }, h("div", { class: "space-y-1" }, h("label", { class: "block text-sm font-medium text-surface" }, "\u0E21\u0E2D\u0E1A\u0E2B\u0E21\u0E32\u0E22\u0E01\u0E25\u0E38\u0E48\u0E21"), h("autocomplete-select", { value: this.selectedGroup, showClearButton: true, fetchItems: () => Promise.resolve(groupOptions), onSelecting: item => this.handleGroupChange(item.detail.id), type: "status", referenceSelector: "group-select", hideLabelUsed: true, placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E01\u0E25\u0E38\u0E48\u0E21", showNoOption: true })), h("div", { class: "space-y-1" }, h("label", { class: "block text-sm font-medium text-surface" }, "\u0E21\u0E2D\u0E1A\u0E2B\u0E21\u0E32\u0E22\u0E41\u0E2D\u0E14\u0E21\u0E34\u0E19"), h("autocomplete-select", { key: this.selectedGroup, value: this.selectedAdmin, showClearButton: true, fetchItems: () => Promise.resolve(adminOptions), onSelecting: item => this.handleAdminChange(item.detail.id), type: "status", referenceSelector: "admin-select", hideLabelUsed: true, placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E41\u0E2D\u0E14\u0E21\u0E34\u0E19" })), h("div", { class: "space-y-1" }, h("label", { class: "block text-sm font-medium text-surface mb-1" }, "\u0E04\u0E27\u0E32\u0E21\u0E04\u0E34\u0E14\u0E40\u0E2B\u0E47\u0E19"), h(ZInputArea, { placeholder: "\u0E23\u0E30\u0E1A\u0E38\u0E04\u0E27\u0E32\u0E21\u0E04\u0E34\u0E14\u0E40\u0E2B\u0E47\u0E19", value: this.comment, onChange: (value) => this.comment = value })), h("div", { class: "flex items-center gap-2 pt-2" }, h("input", { type: "checkbox", id: "follow-case", class: "size-4 rounded border-divider text-primary focus:ring-primary cursor-pointer", checked: this.isFollowing, onChange: (e) => this.isFollowing = e.target.checked }), h("label", { htmlFor: "follow-case", class: "text-sm text-surface select-none cursor-pointer" }, "\u0E15\u0E34\u0E14\u0E15\u0E32\u0E21\u0E40\u0E04\u0E2A\u0E19\u0E35\u0E49\u0E15\u0E48\u0E2D\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07")))), h("div", { class: "p-6 pt-4 flex items-center justify-end gap-3 mt-4" }, h(ZButton, { variant: "outlined", label: "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01", onClick: this.handleClose, fullWidth: true }), h(ZButton, { label: "\u0E21\u0E2D\u0E1A\u0E2B\u0E21\u0E32\u0E22", onClick: this.handleSubmit, fullWidth: true, disabled: (!this.selectedGroup && !this.selectedAdmin) ||
                (this.selectedGroup === (this.ticket.business_group_id || '') &&
                    this.selectedAdmin === (this.ticket.business_user_id || '')) }))))));
    }
    static get is() { return "profile-ticket-assign-dialog"; }
    static get originalStyleUrls() {
        return {
            "$": ["profile-ticket-assign-dialog.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["profile-ticket-assign-dialog.css"]
        };
    }
    static get properties() {
        return {
            "ticket": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "ITicket",
                    "resolved": "ITicket",
                    "references": {
                        "ITicket": {
                            "location": "import",
                            "path": "../../store/zdesk.type",
                            "id": "src/store/zdesk.type.ts::ITicket",
                            "referenceLocation": "ITicket"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "isOpen": {
                "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-open",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "selectedGroup": {},
            "selectedAdmin": {},
            "comment": {},
            "isFollowing": {}
        };
    }
    static get events() {
        return [{
                "method": "close",
                "name": "close",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "submitAssign",
                "name": "submitAssign",
                "bubbles": false,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "{\n    business_group_id: string;\n    business_user_id: string;\n    comment: string;\n    isFollowing: boolean;\n  }",
                    "resolved": "{ business_group_id: string; business_user_id: string; comment: string; isFollowing: boolean; }",
                    "references": {}
                }
            }];
    }
}
