{{! template-lint-disable no-invalid-interactive }}

<ChatMessageSeparator @message={{@message}} />

{{#if
  (and
    this.showActions this.site.mobileView this.chatMessageActionsMobileAnchor
  )
}}
  {{#in-element this.chatMessageActionsMobileAnchor}}
    <ChatMessageActionsMobile
      @message={{@message}}
      @emojiReactions={{this.emojiReactions}}
      @secondaryButtons={{this.secondaryButtons}}
      @messageActions={{this.messageActions}}
      @messageCapabilities={{this.messageCapabilities}}
      @onHoverMessage={{@onHoverMessage}}
    />
  {{/in-element}}
{{/if}}

{{#if
  (and
    this.showActions this.site.desktopView this.chatMessageActionsDesktopAnchor
  )
}}
  {{#in-element this.chatMessageActionsDesktopAnchor}}
    <ChatMessageActionsDesktop
      @message={{@message}}
      @emojiReactions={{this.emojiReactions}}
      @secondaryButtons={{this.secondaryButtons}}
      @messageActions={{this.messageActions}}
      @messageCapabilities={{this.messageCapabilities}}
    />
  {{/in-element}}
{{/if}}

<div
  {{will-destroy this.teardownChatMessage}}
  {{did-insert this.setMessageActionsAnchors}}
  {{did-insert this.decorateCookedMessage}}
  {{did-update this.decorateCookedMessage @message.id}}
  {{on "touchmove" this.handleTouchMove passive=true}}
  {{on "touchstart" this.handleTouchStart passive=true}}
  {{on "touchend" this.handleTouchEnd passive=true}}
  {{on "mouseenter" (fn @onHoverMessage @message (hash desktopOnly=true))}}
  {{on "mouseleave" (fn @onHoverMessage null (hash desktopOnly=true))}}
  {{chat/track-message-visibility}}
  class={{concat-class
    "chat-message-container"
    (if @isHovered "is-hovered")
    (if @selectingMessages "selecting-messages")
  }}
  data-id={{or @message.id @message.stagedId}}
  data-staged-id={{if @message.staged @message.stagedId}}
>
  {{#if this.show}}
    {{#if @selectingMessages}}
      <Input
        @type="checkbox"
        class="chat-message-selector"
        @checked={{@message.selected}}
        {{on "click" this.toggleChecked}}
      />
    {{/if}}

    {{#if this.deletedAndCollapsed}}
      <div class="chat-message-deleted">
        <DButton
          @class="btn-flat chat-message-expand"
          @action={{this.expand}}
          @label="chat.deleted"
        />
      </div>
    {{else if this.hiddenAndCollapsed}}
      <div class="chat-message-hidden">
        <DButton
          @class="btn-flat chat-message-expand"
          @action={{this.expand}}
          @label="chat.hidden"
        />
      </div>
    {{else}}
      <div
        class={{concat-class
          "chat-message"
          (if @message.staged "chat-message-staged")
          (if @message.deleted_at "deleted")
          (if @message.in_reply_to "is-reply")
          (if this.hideUserInfo "user-info-hidden")
          (if @message.error "errored")
          (if @message.bookmark "chat-message-bookmarked")
          (if @isHovered "chat-message-selected")
        }}
      >
        {{#if @message.in_reply_to}}
          <div
            role="button"
            onclick={{action this.viewReplyOrThread}}
            class="chat-reply is-direct-reply"
          >
            {{d-icon "share" title="chat.in_reply_to"}}

            {{#if @message.in_reply_to.chat_webhook_event.emoji}}
              <ChatEmojiAvatar
                @emoji={{@message.in_reply_to.chat_webhook_event.emoji}}
              />
            {{else}}
              <ChatUserAvatar @user={{@message.in_reply_to.user}} />
            {{/if}}

            <span class="chat-reply__excerpt">
              {{replace-emoji @message.in_reply_to.excerpt}}
            </span>
          </div>
        {{/if}}

        {{#if this.hideUserInfo}}
          <ChatMessageLeftGutter @message={{@message}} />
        {{else}}
          <ChatMessageAvatar @message={{@message}} />
        {{/if}}

        <div class="chat-message-content">
          {{#unless this.hideUserInfo}}
            <ChatMessageInfo @message={{@message}} />
          {{/unless}}

          <ChatMessageText
            @cooked={{@message.cooked}}
            @uploads={{@message.uploads}}
            @edited={{@message.edited}}
          >
            {{#if this.hasReactions}}
              <div class="chat-message-reaction-list">
                {{#if this.reactionLabel}}
                  <div class="reaction-users-list">
                    {{replace-emoji this.reactionLabel}}
                  </div>
                {{/if}}

                {{#each-in @message.reactions as |emoji reactionAttrs|}}
                  <ChatMessageReaction
                    @reaction={{hash
                      emoji=emoji
                      users=reactionAttrs.users
                      count=reactionAttrs.count
                      reacted=reactionAttrs.reacted
                    }}
                    @react={{this.react}}
                    @showUsersList={{true}}
                  />
                {{/each-in}}

                {{#if @canInteractWithChat}}
                  {{#unless this.site.mobileView}}
                    <DButton
                      @class="chat-message-react-btn"
                      @action={{this.startReactionForReactionList}}
                      @icon="discourse-emojis"
                      @title="chat.react"
                    />
                  {{/unless}}
                {{/if}}
              </div>
            {{/if}}
          </ChatMessageText>

          {{#if @message.error}}
            <div class="chat-send-error">
              {{#if (eq @message.error "network_error")}}
                <DButton
                  class="retry-staged-message-btn"
                  @action={{fn @resendStagedMessage @message}}
                  @icon="exclamation-circle"
                >
                  <span class="retry-staged-message-btn__title">
                    {{i18n "chat.retry_staged_message.title"}}
                  </span>
                  <span class="retry-staged-message-btn__action">
                    {{i18n "chat.retry_staged_message.action"}}
                  </span>
                </DButton>
              {{else}}
                {{@message.error}}
              {{/if}}
            </div>
          {{/if}}

          <PostSendMentionWarnings
            @chatChannelId={{this.details.chat_channel_id}}
            @warnings={{this.mentionWarnings}}
            @messageId={{this.message.id}}
            @dismiss={{this.dismissMentionWarnings}}
          />
        </div>
      </div>
    {{/if}}
  {{/if}}
</div>