import { h, Host } from "@stencil/core";
import { PlatformServiceName, } from "@limetech/lime-web-components";
/**
 * Feed item
 *
 * @private
 */
export class KanbanItemComponent {
    constructor() {
        this.renderRelations = () => {
            var _a, _b, _c;
            if (!((_b = (_a = this.item) === null || _a === void 0 ? void 0 : _a.relations) === null || _b === void 0 ? void 0 : _b.length)) {
                return;
            }
            return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
        };
        this.renderAssigneesAvatar = (assignee) => {
            if (!assignee.picture) {
                return (h("limel-icon", { name: assignee.icon.name, style: {
                        color: `${assignee.icon.color}`,
                        'background-color': `${assignee.icon.backgroundColor}`,
                    } }));
            }
            return (h("img", { loading: "lazy", src: assignee.picture, alt: assignee.name.text }));
        };
        this.createMenuItem = (action) => {
            var _a, _b;
            if ('separator' in action) {
                return action;
            }
            return {
                value: action,
                text: (_a = action.label) !== null && _a !== void 0 ? _a : '',
                secondaryText: action.description,
                disabled: action.disabled,
                icon: (_b = action.icon) !== null && _b !== void 0 ? _b : '',
            };
        };
        this.handleMenuItemSelect = (event) => {
            var _a;
            event.stopPropagation();
            const command = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.command;
            if (command) {
                this.commandbus.handle(command);
            }
        };
        this.handleKeyDown = (event) => {
            if (event.key === 'Enter') {
                this.handleKanbanItemClick();
            }
        };
        this.handleKanbanItemClick = () => {
            this.interact.emit(this.item);
        };
    }
    render() {
        var _a, _b;
        return (h(Host, { key: '0d3c75642c2ea8ec42e475ef7a5e206f408eb446', id: this.item.id.toString(), class: {
                'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
            }, style: {
                '--limebb-kanban-item-color-code': `${this.item.color}`,
            }, onClick: this.handleKanbanItemClick, onKeyDown: this.handleKeyDown }, this.renderHeader(), this.renderContent(), this.renderSlot(), this.renderRelations(), this.renderFooter()));
    }
    renderHeader() {
        return (h("div", { class: "header" }, this.renderIcon(), this.renderHeading(), this.renderUnpromotedActionsMenu()));
    }
    renderIcon() {
        var _a, _b, _c, _d;
        if (!this.item.icon) {
            return;
        }
        return (h("limel-icon", { class: "icon", badge: true, name: (_b = (_a = this.item.icon) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'dot_circle', style: {
                color: `${(_c = this.item.icon) === null || _c === void 0 ? void 0 : _c.color}`,
                'background-color': `${(_d = this.item.icon) === null || _d === void 0 ? void 0 : _d.backgroundColor}`,
            } }));
    }
    renderContent() {
        if (!this.item.value) {
            return;
        }
        return h("div", { class: "content" }, this.renderValue());
    }
    renderHeading() {
        if (!this.item.heading) {
            return;
        }
        return h("limel-markdown", { class: "heading", value: this.item.heading });
    }
    renderValue() {
        if (!this.item.value) {
            return;
        }
        return (h("limel-markdown", { class: "body reset-img-height", value: this.item.value }));
    }
    renderUnpromotedActionsMenu() {
        var _a, _b;
        if (!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length)) {
            return;
        }
        const items = this.item.unpromotedActions.map(this.createMenuItem);
        return (h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon", { class: "actions", name: "menu_2", slot: "trigger", size: "small", id: "item-actions-tooltip" }), h("limel-tooltip", { elementId: "item-actions-tooltip", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions'), openDirection: "top-end" })));
    }
    renderSlot() {
        var _a;
        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.bodyComponent)) {
            return;
        }
        return h("slot", { name: "body" });
    }
    renderFooter() {
        var _a;
        if (!((_a = this.item.assignees) === null || _a === void 0 ? void 0 : _a.length)) {
            return;
        }
        return h("div", { class: "footer" }, this.renderAssignees());
    }
    renderAssignees() {
        var _a;
        if (!((_a = this.item.assignees) === null || _a === void 0 ? void 0 : _a.length)) {
            return;
        }
        return (h("div", { class: "assignees" }, this.item.assignees.map((assignee) => {
            var _a;
            return (h("limebb-summary-popover", Object.assign({ icon: (_a = assignee.icon) === null || _a === void 0 ? void 0 : _a.name }, (assignee.picture && {
                image: {
                    src: assignee.picture,
                    alt: assignee.name.text || '',
                },
            }), { heading: assignee.name.text, value: this.createLinkToAssignee(assignee) }), h("a", { slot: "trigger", class: "assignee", href: assignee.name.href, title: assignee.name.text }, this.renderAssigneesAvatar(assignee), h("span", null, assignee.name.text))));
        })));
    }
    createLinkToAssignee(assignee) {
        const linkText = this.translator.get('webclient.actions.goto-object', {
            limetype: ': <br><b>' + assignee.name.text + '</b>',
        });
        return `<a class="author" href="${assignee.name.href}" title="${assignee.name.text}">${linkText}</a>`;
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Translate);
    }
    get commandbus() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.CommandBus);
    }
    static get is() { return "limebb-kanban-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["kanban-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["kanban-item.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "Reference to the platform service container.\n\nUse this to access all platform services like repositories, HTTP client,\ncommand bus, navigator, and more. The platform instance is shared across\nall components in the same application context."
                },
                "getter": false,
                "setter": false
            },
            "context": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentContext",
                    "resolved": "LimeWebComponentContext",
                    "references": {
                        "LimeWebComponentContext": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentContext",
                            "referenceLocation": "LimeWebComponentContext"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": "The context describing where this component is running.\n\nThe context provides information about the current limetype and record ID\n(if viewing/editing a specific record). Components can use this to load\nrelevant data and understand their operating environment."
                },
                "getter": false,
                "setter": false
            },
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "KanbanItem",
                    "resolved": "KanbanItem",
                    "references": {
                        "KanbanItem": {
                            "location": "import",
                            "path": "./kanban-item.types",
                            "id": "src/components/kanban/kanban-item/kanban-item.types.ts::KanbanItem",
                            "referenceLocation": "KanbanItem"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The item to display in the Kanban group."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get events() {
        return [{
                "method": "interact",
                "name": "interact",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when clicking on the Kanban item."
                },
                "complexType": {
                    "original": "KanbanItem",
                    "resolved": "KanbanItem",
                    "references": {
                        "KanbanItem": {
                            "location": "import",
                            "path": "./kanban-item.types",
                            "id": "src/components/kanban/kanban-item/kanban-item.types.ts::KanbanItem",
                            "referenceLocation": "KanbanItem"
                        }
                    }
                }
            }];
    }
}
