import { h } from "@stencil/core";
import { PlatformServiceName, } from "@limetech/lime-web-components";
const TRIGGER_DEFINITIONS = [
    {
        trigger: 'rich-text',
        icon: 'font_style_formatting',
        translationKey: 'webclient.composer-toolbar.rich-text',
    },
    {
        trigger: 'mention',
        icon: 'email_sign_92447',
        translationKey: 'webclient.composer-toolbar.mention',
        helperLabel: '@',
    },
    {
        trigger: 'text-snippet',
        icon: 'add_text',
        translationKey: 'webclient.composer-toolbar.text-snippet',
        helperLabel: '!',
    },
    {
        trigger: 'internal-link',
        icon: 'hashtag_large',
        translationKey: 'webclient.composer-toolbar.internal-link',
        helperLabel: '#',
    },
];
/**
 * A toolbar for composers, primarily intended to be placed below
 * a `limebb-text-editor` in the Activity Feed.
 *
 * The toolbar provides a consistent layout with built-in trigger buttons
 * for common actions (mentions, text snippets, internal links) and
 * a built-in file input. Consumers can extend the toolbar with custom
 * elements using the `leading` and `trailing` slots, and provide their
 * own submit button via the `primary-action` slot.
 *
 * @slot leading - Place custom elements before the built-in actions.
 * For example, a custom file picker.
 * @slot trailing - Place custom elements after the built-in actions.
 * @slot primary-action - The submit button area. Render a `limel-button`
 * or `limel-split-button` here.
 *
 * @exampleComponent limebb-example-composer-toolbar-basic
 * @exampleComponent limebb-example-composer-toolbar-primary-action
 * @exampleComponent limebb-example-composer-toolbar-file-input
 * @exampleComponent limebb-example-composer-toolbar-full
 * @exampleComponent limebb-example-composer-toolbar-custom-slots
 * @exampleComponent limebb-example-composer-toolbar-with-text-editor
 *
 * @beta
 */
export class ComposerToolbar {
    constructor() {
        /**
         * When `true`, displays a button that triggers
         * the mention character (`@`) in the text editor.
         */
        this.mentions = false;
        /**
         * When `true`, displays a button that triggers
         * the text snippet character (`!`) in the text editor.
         */
        this.textSnippets = false;
        /**
         * When `true`, displays a button that triggers
         * the internal link character (`#`) in the text editor.
         */
        this.internalLinks = false;
        /**
         * When `true`, displays a button that toggles the visibility
         * of the rich text formatting toolbar in the text editor.
         */
        this.richText = false;
        this.handleTriggerSelected = (event) => {
            event.stopPropagation();
            this.triggerInsert.emit(event.detail.value);
        };
        this.handleFilesSelected = (event) => {
            event.stopPropagation();
            this.filesSelected.emit(event.detail);
        };
    }
    render() {
        return [
            h("div", { key: '34b441a01bfcca09b934ffc5aa5f6852efd359fd', class: "actions" }, h("slot", { key: '7b4ebdd76e9b58a7a9aa376aeffedf146f000973', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), h("slot", { key: '0b3fdc53e1dde0963f131684e7994ffc49e737fa', name: "trailing" })),
            h("slot", { key: '82ca56d3d8a9e227f343f4bedaaadca5c075f02e', name: "primary-action" }),
        ];
    }
    get translator() {
        var _a;
        return (_a = this.platform) === null || _a === void 0 ? void 0 : _a.get(PlatformServiceName.Translate);
    }
    get triggerActions() {
        const enabledFlags = {
            mention: this.mentions,
            'text-snippet': this.textSnippets,
            'internal-link': this.internalLinks,
            'rich-text': this.richText,
        };
        return TRIGGER_DEFINITIONS.filter((def) => enabledFlags[def.trigger]).map((def) => {
            var _a, _b;
            return ({
                text: (_b = (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get(def.translationKey)) !== null && _b !== void 0 ? _b : def.trigger,
                commandText: def.helperLabel,
                icon: def.icon,
                iconOnly: true,
                value: def.trigger,
            });
        });
    }
    renderTriggerActions() {
        const actions = this.triggerActions;
        if (actions.length === 0) {
            return;
        }
        return (h("limel-action-bar", { actions: actions, onItemSelected: this.handleTriggerSelected }));
    }
    renderFileInput() {
        var _a, _b, _c, _d, _e, _f;
        if (!this.fileInput) {
            return;
        }
        return (h("limel-file-input", { accept: (_a = this.fileInput.accept) !== null && _a !== void 0 ? _a : '*', multiple: (_b = this.fileInput.multiple) !== null && _b !== void 0 ? _b : false, disabled: (_c = this.fileInput.disabled) !== null && _c !== void 0 ? _c : false, onFilesSelected: this.handleFilesSelected }, h("limel-icon-button", { icon: "attach", disabled: (_d = this.fileInput.disabled) !== null && _d !== void 0 ? _d : false, label: (_e = this.translator) === null || _e === void 0 ? void 0 : _e.get('webclient.attach-files'), helperLabel: (_f = this.translator) === null || _f === void 0 ? void 0 : _f.get('webclient.attach-files-helper') })));
    }
    static get is() { return "limebb-composer-toolbar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["composer-toolbar.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["composer-toolbar.css"]
        };
    }
    static get properties() {
        return {
            "platform": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "LimeWebComponentPlatform",
                    "resolved": "LimeWebComponentPlatform | undefined",
                    "references": {
                        "LimeWebComponentPlatform": {
                            "location": "import",
                            "path": "@limetech/lime-web-components",
                            "id": "node_modules::LimeWebComponentPlatform",
                            "referenceLocation": "LimeWebComponentPlatform"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "inheritdoc",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "mentions": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When `true`, displays a button that triggers\nthe mention character (`@`) in the text editor."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "mentions",
                "defaultValue": "false"
            },
            "textSnippets": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When `true`, displays a button that triggers\nthe text snippet character (`!`) in the text editor."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "text-snippets",
                "defaultValue": "false"
            },
            "internalLinks": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When `true`, displays a button that triggers\nthe internal link character (`#`) in the text editor."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "internal-links",
                "defaultValue": "false"
            },
            "richText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "When `true`, displays a button that toggles the visibility\nof the rich text formatting toolbar in the text editor."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "rich-text",
                "defaultValue": "false"
            },
            "fileInput": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "FileInputConfig",
                    "resolved": "FileInputConfig | undefined",
                    "references": {
                        "FileInputConfig": {
                            "location": "import",
                            "path": "./composer-toolbar.types",
                            "id": "src/components/composer-toolbar/composer-toolbar.types.ts::FileInputConfig",
                            "referenceLocation": "FileInputConfig"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Configuration for the built-in file input button.\nWhen provided, an attachment button is rendered.\nSet to `null` or `undefined` to hide the file input."
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get events() {
        return [{
                "method": "triggerInsert",
                "name": "triggerInsert",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when a built-in trigger button is clicked."
                },
                "complexType": {
                    "original": "ComposerTrigger",
                    "resolved": "\"internal-link\" | \"mention\" | \"rich-text\" | \"text-snippet\"",
                    "references": {
                        "ComposerTrigger": {
                            "location": "import",
                            "path": "./composer-toolbar.types",
                            "id": "src/components/composer-toolbar/composer-toolbar.types.ts::ComposerTrigger",
                            "referenceLocation": "ComposerTrigger"
                        }
                    }
                }
            }, {
                "method": "filesSelected",
                "name": "filesSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Fired when files are selected via the built-in file input."
                },
                "complexType": {
                    "original": "FileInfo[]",
                    "resolved": "FileInfo[]",
                    "references": {
                        "FileInfo": {
                            "location": "import",
                            "path": "@limetech/lime-elements",
                            "id": "node_modules::FileInfo",
                            "referenceLocation": "FileInfo"
                        }
                    }
                }
            }];
    }
}
