import type { CurrentUser, SiteSettings } from '../../env';
import type { CommentView } from '../../services/comments';
import type { FeedPost } from '../../services/posts';
import { mediaUrl } from '../../utils/image';
import { formatMomentTime } from '../../utils/time';
import { Icons } from './icons';

export function PostItem(props: { post: FeedPost; comments?: CommentView[]; settings: SiteSettings; currentUser: CurrentUser | null }) {
  const { post, settings } = props;
  const comments = props.comments || [];
  const avatar = mediaUrl(settings.cdn_base_url, post.author.avatarKey);
  const imageCount = post.images.length;
  const gridClass = imageCount === 1 ? 'single' : imageCount === 4 ? 'four' : 'grid';

  return (
    <article class="post-item" id={`post-${post.id}`} data-post-id={post.id} data-liked={post.viewerLiked ? '1' : '0'}>
      <a class="post-avatar" href={`/u/${post.author.username}`}>
        <img src={avatar} alt={`${post.author.displayName} 的头像`} loading="lazy" />
      </a>
      <div class="post-body">
        <div class="post-head">
          <a class="post-author" href={`/u/${post.author.username}`}>{post.author.displayName}</a>
          <div class="post-badges">
            {post.isTop ? <span>置顶</span> : null}
            {post.isAd ? <span>广告</span> : null}
            {post.visibility === 'private' ? <span>私密</span> : null}
          </div>
        </div>
        {post.title ? <h2 class="post-title"><a href={`/p/${post.id}`}>{post.title}</a></h2> : null}
        {post.contentHtml ? <div class="post-content" dangerouslySetInnerHTML={{ __html: post.contentHtml }} /> : null}
        {post.shareUrl ? (
          <a class="share-card" href={post.shareUrl} target="_blank" rel="noopener noreferrer">
            {post.shareThumb ? <img src={post.shareThumb} alt="" loading="lazy" /> : null}
            <span>{post.title || post.shareUrl}</span>
          </a>
        ) : null}
        {post.videoUrl ? (
          <video class="post-video" src={post.videoUrl} controls preload="metadata" playsinline />
        ) : null}
        {imageCount > 0 ? (
          <div class={`post-images ${gridClass}`} data-count={imageCount}>
            {post.images.slice(0, 9).map((image, index) => (
              <a class="post-image" href={image.url} data-fancybox={`gallery-${post.id}`} data-caption={`${post.author.displayName} 的图片 ${index + 1}`}>
                <img src={image.url} alt="" loading="lazy" />
                {index === 8 && imageCount > 9 ? <span class="post-image-more">+{imageCount - 9}</span> : null}
              </a>
            ))}
          </div>
        ) : null}
        {post.position ? (
          <div class="post-location">
            {Icons.location({ class: 'wm-icon tiny' })}
            <span>{post.position}</span>
          </div>
        ) : null}
        <div class="post-meta">
          <a class="post-time" href={`/p/${post.id}`}>{formatMomentTime(post.createdAt)}</a>
          <button class="post-more-button" type="button" data-action="toggle-actions" aria-label="展开操作">
            {Icons.more({ class: 'wm-icon' })}
          </button>
          <div class="post-time-comment-modal" hidden>
            <button type="button" data-action="like-post">
              {Icons.heart({ class: 'wm-icon tiny' })}
              <span>{post.viewerLiked ? '已赞' : '赞'}</span>
            </button>
            <button type="button" data-action="comment-post">
              {Icons.message({ class: 'wm-icon tiny' })}
              <span>评论</span>
            </button>
          </div>
        </div>
        <div class="post-comment-container" data-comment-container hidden={post.likeCount === 0 && comments.length === 0}>
          <div class="post-like-line" hidden={post.likeCount === 0}>
            {Icons.heart({ class: 'wm-icon tiny' })}
            <span data-like-text>共 <b>{post.likeCount}</b> 人赞过</span>
          </div>
          <div class="post-comment-list">
            {comments.map((comment) => (
              <div class="post-comment" data-comment-id={comment.id}>
                <button type="button" class="comment-text" data-action="reply-comment" data-comment-id={comment.id} data-author={comment.authorName}>
                  <a href={comment.authorUrl || '#'}>{comment.authorName}</a>
                  {comment.replyToName ? <span> 回复 <b>{comment.replyToName}</b></span> : null}
                  <span>: </span>
                  <span dangerouslySetInnerHTML={{ __html: comment.contentHtml }} />
                </button>
                {comment.canDelete ? <button class="comment-delete" type="button" data-action="delete-comment" data-comment-id={comment.id}>删除</button> : null}
              </div>
            ))}
          </div>
        </div>
        <form class="inline-comment-form" data-comment-form hidden>
          <input type="hidden" name="postId" value={post.id} />
          <input type="hidden" name="parentId" value="" />
          <input class="guest-field" name="guestName" placeholder="昵称" autocomplete="name" hidden={Boolean(props.currentUser)} />
          <textarea name="content" rows={2} maxlength={1000} placeholder="写评论..." required />
          <div class="inline-comment-actions">
            <button type="button" data-action="cancel-comment">取消</button>
            <button type="submit">发送</button>
          </div>
        </form>
      </div>
    </article>
  );
}
