import { html } from "/js/lib/lit-html.js";
import { noop, formatFullTimestamp, formatLargeNumber } from "/js/utils.js";
import {
  isBlockedPost,
  isNotFoundPost,
  isUnavailablePost,
  doHideAuthorOnUnauthenticated,
} from "/js/dataHelpers.js";
import { avatarTemplate } from "/js/templates/avatar.template.js";
import "/js/components/plugin-rich-text.js";
import { postEmbedTemplate } from "/js/templates/postEmbed.template.js";
import { postActionBarTemplate } from "/js/templates/postActionBar.template.js";
import { postHeaderTextTemplate } from "/js/templates/postHeaderText.template.js";
import { labelBadgesTemplate } from "/js/templates/labelBadges.template.js";
import { blockedPostTemplate } from "/js/templates/blockedPost.template.js";
import { whoCanReplyBadgeTemplate } from "/js/templates/whoCanReplyBadge.template.js";
import { notFoundPostTemplate } from "/js/templates/notFoundPost.template.js";
import { unavailablePostTemplate } from "/js/templates/unavailablePost.template.js";
import {
  linkToPostLikes,
  linkToPostQuotes,
  linkToPostReposts,
} from "/js/navigation.js";
import "/js/components/lightbox-image-group.js";

function mutedWarningTemplate({ post, children }) {
  if (post.viewer?.hasMutedWord) {
    return html`<moderation-warning
      label="Post hidden by muted word"
      icon-style="closed-eye"
      >${children}</moderation-warning
    > `;
  } else if (post.viewer?.isHidden) {
    return html`<moderation-warning
      label="Post hidden by you"
      icon-style="closed-eye"
      >${children}</moderation-warning
    > `;
  }
  return children;
}

function postActionCountsTemplate({
  repostCount,
  likeCount,
  quoteCount,
  bookmarkCount,
  post,
}) {
  if (!repostCount && !likeCount && !quoteCount && !bookmarkCount) {
    return null;
  }
  return html`
    <div class="post-action-counts">
      ${repostCount > 0
        ? html`<a href="${linkToPostReposts(post)}" class="post-action-count">
            <span class="post-action-count-num"
              >${formatLargeNumber(repostCount)}</span
            >
            <span class="post-action-count-text"
              >${repostCount === 1 ? "repost" : "reposts"}</span
            >
          </a>`
        : ""}
      ${quoteCount > 0
        ? html`<a href="${linkToPostQuotes(post)}" class="post-action-count">
            <span class="post-action-count-num"
              >${formatLargeNumber(quoteCount)}</span
            >
            <span class="post-action-count-text"
              >${quoteCount === 1 ? "quote" : "quotes"}</span
            >
          </a>`
        : ""}
      ${likeCount > 0
        ? html`<a href="${linkToPostLikes(post)}" class="post-action-count">
            <span class="post-action-count-num"
              >${formatLargeNumber(likeCount)}</span
            >
            <span class="post-action-count-text"
              >${likeCount === 1 ? "like" : "likes"}</span
            >
          </a>`
        : ""}
      ${bookmarkCount > 0
        ? html`<div class="post-action-count">
            <span class="post-action-count-num"
              >${formatLargeNumber(bookmarkCount)}</span
            >
            <span class="post-action-count-text"
              >${bookmarkCount === 1 ? "save" : "saves"}</span
            >
          </div>`
        : ""}
    </div>
  `;
}

export function largePostTemplate({
  post,
  currentUser,
  isAuthenticated,
  isUserPost,
  postInteractionHandler,
  onClickReply = noop,
  replyContext,
  afterDelete = null,
  afterHide = null,
  pluginService,
}) {
  if (isBlockedPost(post)) {
    return blockedPostTemplate();
  } else if (isNotFoundPost(post)) {
    return notFoundPostTemplate();
  } else if (isUnavailablePost(post)) {
    return unavailablePostTemplate();
  } else if (
    !isAuthenticated &&
    post.author &&
    doHideAuthorOnUnauthenticated(post.author)
  ) {
    return unavailablePostTemplate();
  }
  const embed = post.embed ?? post.record?.embed;
  const postText = post.record.text || "";
  const badgeLabels = post.badgeLabels ?? [];
  const contentLabel = post.contentLabel;
  // Instead of hiding, add the content label to the badge labels
  if (contentLabel && contentLabel.visibility !== "ignore") {
    badgeLabels.push(contentLabel);
  }
  return html`<div class="post large-post" data-testid="large-post">
    <div class="post-content">
      <div class="post-content-top">
        <div>
          ${replyContext === "parent" || replyContext === "reply"
            ? html`<div class="reply-context-line-in"></div>`
            : ""}
          <div>${avatarTemplate({ author: post.author })}</div>
        </div>
        <div class="large-post-header-text">
          ${postHeaderTextTemplate({
            author: post.author,
            timestamp: post.indexedAt,
            includeTime: false,
          })}
        </div>
      </div>
      ${badgeLabels.length > 0 ? labelBadgesTemplate({ badgeLabels }) : ""}
      <div class="post-content-bottom">
        ${mutedWarningTemplate({
          post,
          children: html`<div class="post-body">
            ${postText.length > 0
              ? html`<div class="post-text">
                  <plugin-rich-text
                    .pluginService=${pluginService}
                    .text=${postText}
                    .facets=${post.record.facets}
                    .transformContext=${{
                      surface: "largePost",
                      uri: post.uri,
                      did: post.author?.did ?? null,
                    }}
                    truncate-urls
                  ></plugin-rich-text>
                </div>`
              : ""}
            ${embed
              ? html`<div class="post-embed">
                  ${postEmbedTemplate({
                    embed,
                    mediaLabel: post.mediaLabel,
                    isAuthenticated,
                    pluginService,
                  })}
                </div>`
              : null}
          </div>`,
        })}
        <div class="post-full-timestamp">
          ${formatFullTimestamp(post.indexedAt)}
          ${whoCanReplyBadgeTemplate({ post })}
        </div>
        ${postActionCountsTemplate({
          repostCount: post.repostCount,
          quoteCount: post.quoteCount,
          likeCount: post.likeCount,
          bookmarkCount: post.bookmarkCount,
          post,
        })}
        ${postActionBarTemplate({
          post,
          isUserPost,
          isAuthenticated,
          currentUser,
          onClickReply,
          onClickLike: (post, doLike) =>
            postInteractionHandler.handleLike(post, doLike),
          onClickRepost: (post, doRepost) =>
            postInteractionHandler.handleRepost(post, doRepost),
          onClickQuotePost: (post) =>
            postInteractionHandler.handleQuotePost(post),
          onClickBookmark: (post, doBookmark) =>
            postInteractionHandler.handleBookmark(post, doBookmark),
          onClickHidePost: async (post) => {
            await postInteractionHandler.handleHidePost(post);
            if (afterHide) {
              afterHide(post);
            }
          },
          onClickMute: (profile, doMute) =>
            postInteractionHandler.handleMuteAuthor(profile, doMute),
          onClickBlock: (profile, doBlock) =>
            postInteractionHandler.handleBlockAuthor(profile, doBlock),
          onClickDelete: async (post) => {
            await postInteractionHandler.handleDeletePost(post);
            if (afterDelete) {
              afterDelete(post);
            }
          },
          onClickPin: (post, doPin) =>
            postInteractionHandler.handlePinPost(post, doPin),
          onClickReport: (post) => postInteractionHandler.handleReport(post),
          pluginService,
        })}
      </div>
    </div>
  </div>`;
}
