include ../../link/components/preview
include ../../user/components/profile-picture
include ./reaction-bar

mixin renderChatMessage (message)
  div(data-message-id= message._id).chat-message
    .uk-flex
      .uk-width-auto.no-select
        +renderProfilePicture(message.author, { iconClass: 'member-profile-icon' })
      .uk-width-expand
        .message-attribution.uk-margin-small.no-select
          div(uk-grid).uk-grid-small.uk-flex-middle
            .uk-width-auto
              .author-display-name= message.author.displayName || message.author.username
            .uk-width-auto
              .message-timestamp(
                data-dtp-timestamp= message.created,
                data-dtp-timestamp-format= "time",
                uk-tooltip={ title: dayjs(message.created).format('MMM D, YYYY') }
              )= dayjs(message.created).format('h:mm a')

        if message.content && (message.content.length > 0)
          .message-content
            div!= marked.parse(message.content, { renderer: fullMarkedRenderer })

        if message.attachments
          .message-attachments
            if Array.isArray(message.attachments.images) && (message.attachments.images.length > 0)
              div(class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-3@m uk-child-width-1-4@l uk-child-width-1-5@xl", uk-grid, uk-lightbox="animation: slide").uk-grid-small
                each image of message.attachments.images
                  a(href=`/image/${image._id}`, data-type="image", data-caption= `${image.metadata.width}x${image.metadata.height} | ${image.metadata.space.toUpperCase()} | ${image.metadata.format.toUpperCase()} | ${numeral(image.size).format('0,0.0b')}`)
                    img(src=`/image/${image._id}`, width= image.metadata.width, height= image.metadata.height, alt="Image attachment").image-attachment

            if Array.isArray(message.attachments.videos) && (message.attachments.videos.length > 0)
              each video of message.attachments.videos
                if video.flags && video.flags.fromGif
                  video(
                    data-video-id= video._id,
                    data-from-gif,
                    poster= video.thumbnail ? `/image/${video.thumbnail._id}` : false,
                    disablepictureinpicture, disableremoteplayback, playsinline, muted, autoplay, loop,
                  ).video-attachment
                    source(src=`/video/${video._id}/media`)
                else
                  video(
                    data-video-id= video._id,
                    poster= video.thumbnail ? `/image/${video.thumbnail._id}` : false,
                    controls, disablepictureinpicture, disableremoteplayback, playsinline, 
                  ).video-attachment
                    source(src=`/video/${video._id}/media`)

        if Array.isArray(message.links) && (message.links.length > 0)
          each link in message.links
            div(class="uk-width-large").uk-margin-small
              +renderLinkPreview(link, { layout: 'responsive' })

        +renderReactionBar(message)

        if process.env.NODE_ENV !== 'production'
          .uk-margin-small.uk-text-small.uk-text-muted id:#{message._id}

    .message-menu
      .uk-flex.uk-flex-middle
        .uk-width-auto
          button(
            type="button",
            data-message-id= message._id,
            data-emoji="👍️",
            uk-tooltip="React with thumbs-up"
            onclick="return dtp.app.toggleMessageReaction(event);",
          ).message-menu-button 👍️
        .uk-width-auto
          button(
            type="button",
            data-message-id= message._id,
            data-emoji="👎️",
            uk-tooltip="React with thumbs-down"
            onclick="return dtp.app.toggleMessageReaction(event);",
          ).message-menu-button 👎️
        .uk-width-auto
          button(
            type="button",
            data-message-id= message._id,
            data-emoji="😃",
            uk-tooltip="React with smiley"
            onclick="return dtp.app.toggleMessageReaction(event);",
          ).message-menu-button 😃
        .uk-width-auto
          button(
            type="button",
            data-message-id= message._id,
            data-emoji="🤣",
            uk-tooltip="React with laugh"
            onclick="return dtp.app.toggleMessageReaction(event);",
          ).message-menu-button 🤣
        .uk-width-auto
          button(
            type="button",
            data-message-id= message._id,
            data-emoji="🫡",
            uk-tooltip="React with salute"
            onclick="return dtp.app.toggleMessageReaction(event);",
          ).message-menu-button 🫡
        .uk-width-auto
          button(
            type="button",
            data-message-id= message._id,
            data-emoji="🎉",
            uk-tooltip="React with a tada!"
            onclick="return dtp.app.toggleMessageReaction(event);",
          ).message-menu-button 🎉

        .uk-width-auto
          button(type="button").dropdown-menu
            span
              i.fa-solid.fa-ellipsis-vertical
          div(uk-dropdown="mode: click")
            ul.uk-nav.uk-dropdown-nav
              if !user._id.equals(message.author._id)
                li
                  a(href="") Reply
              if user._id.equals(message.author._id)
                li
                  a(href="") Edit
                li
                  a(
                    href="",
                    data-message-id= message._id,
                    onclick="return dtp.app.deleteChatMessage(event);",
                  ) Delete