// #region Imports
import { html } from '../../../../Dom/Html';
import { Icons } from '../../../../Resources/Icons';
import { live, repeat, when } from '../../../Directives/Directives';
import { queryShadow } from '../../../Directives/QueryShadow';
import { Appearance } from '../../../Types/Appearance';
import { ExpandDirection } from '../../../Types/ExpandDirection';
import { Size } from '../../../Types/Size';
import { ChatReactions } from './Models/IChatReaction';
// #endregion
/**
 * The template of the {@link ChatInputElement}.
 *
 * @public
 */
export function chatInputElementTemplate(e) {
    return html `
        <mosaik-expander part="expander"
                         id="expander"
                         .dir="${e.dir}"
                         .isExpanded="${false}"
                         .direction="${ExpandDirection.Up}">
            <mosaik-stack .dir="${e.dir}"
                          .gap="${'8px'}">
                ${repeat(ChatReactions.default, (reaction) => reaction.unicode, (reaction) => html `
                <mosaik-button part="reaction" .dir="${e.dir}"
                               .appearance="${Appearance.Plain}"
                               @click="${(x) => e.onReaction(x.target.toEmoji())}">
                    <mosaik-emoji part="emoji"
                                  slot="icon"
                                  .dir="${e.dir}"
                                  .unicode="${reaction.unicode}"
                                  .size="${Size.Small}"></mosaik-emoji>
                </mosaik-button>
                `)}
            </mosaik-stack>
        </mosaik-expander>
        <div part="attachments">
            ${repeat(e.value.files, (file) => file.name, (file) => html `
            <mosaik-chip part="attachment"
                         .label="${file.name}">
                <mosaik-text slot="label"
                            .text="${file.name}"
                            .maxLength="${20}"
                            .truncate="${true}"></mosaik-text>
            </mosaik-chip>
            `)}
        </div>
        <mosaik-textbox part="textBox"
                        .dir="${e.dir}"
                        .placeholder="${e.placeholder}"
                        .multiline="${true}"
                        .value="${live(e.value.message)}"
                        .appearance="${Appearance.Plain}"
                        .variant="${e.variant}"
                        @input="${(x) => e.onInput(x)}"
                        @keyup="${(x) => e.onKeyup(x)}"></mosaik-textbox>
        <div part="actions">
            ${when(e.allowAttachments, () => html `
            <mosaik-file-picker .multiple="${true}"
                                @filePicked="${(x) => { e.attach(x.detail.files); }}">
                <mosaik-button .dir="${e.dir}"
                               .appearance="${Appearance.Plain}"
                               .icon="${Icons.add}"></mosaik-button>
            </mosaik-file-picker>
            `)}
            <mosaik-toggle-button .dir="${e.dir}"
                                  .appearance="${Appearance.Plain}"
                                  .icon="${Icons.emoji}"
                                  @click="${() => queryShadow(e, '#expander', true).toggle()}"></mosaik-toggle-button>
            <mosaik-button .dir="${e.dir}"
                           .appearance="${Appearance.Plain}"
                           .icon="${Icons.send}"
                           @click="${() => e.send(e.value.message, e.value.files)}"></mosaik-button>

        </div>
    `;
}
//# sourceMappingURL=ChatInputElementTemplate.js.map