import config from "../config.ts";
import { displayName } from "../lib/users.ts";
import type { SessionUser } from "../middleware/session.ts";
import { Avatar } from "./Avatar.tsx";
import { DateWithEdited } from "./DateWithEdited.tsx";
import { ReactionBar, type ReactionCount } from "./ReactionBar.tsx";

export interface ThreadComment {
    id: number;
    author_id: number | null;
    author_username: string;
    author_avatar_version: number | null;
    body: string;
    bodyHtml: string;
    created_at: string;
    edited_at: string | null;
}

interface CommentThreadProps {
    user: SessionUser | null;
    comments: ThreadComment[];
    commentReactions: Map<number, ReactionCount[]>;
    baseUrl: string;
    parentStatus: string;
}

export function CommentThread({
    user,
    comments,
    commentReactions,
    baseUrl,
    parentStatus,
}: CommentThreadProps) {
    const reactUrl = `${baseUrl}/react`;
    const canEditComment = (c: ThreadComment) =>
        user != null &&
        (user.isAdmin || (user.id === c.author_id && parentStatus === "open"));
    return (
        <>
            {comments.map((comment) => (
                <div class="timeline-item">
                    <div class="timeline-author">
                        <Avatar
                            userId={comment.author_id}
                            version={comment.author_avatar_version}
                            size={24}
                        />
                        <strong safe>
                            {displayName(comment.author_username)}
                        </strong>
                        <div class="timeline-author-right">
                            {canEditComment(comment) && (
                                <details class="inline-edit-details">
                                    <summary class="btn btn-xs">
                                        <span class="when-closed">Edit</span>
                                        <span class="when-open">
                                            Stop editing
                                        </span>
                                    </summary>
                                </details>
                            )}
                            <DateWithEdited
                                date={comment.created_at}
                                editedAt={comment.edited_at}
                            />
                        </div>
                    </div>
                    {canEditComment(comment) && (
                        <div class="inline-edit-form-area">
                            <form
                                method="POST"
                                action={`${baseUrl}/comments/${comment.id}/edit`}
                                class="inline-edit-form"
                            >
                                <div class="form-group">
                                    <textarea
                                        class="form-input"
                                        name="edit_body"
                                        rows="6"
                                        maxlength={config.MAX_TEXT_BODY_BYTES}
                                        safe
                                    >
                                        {comment.body}
                                    </textarea>
                                </div>
                                <div class="form-actions">
                                    <button
                                        type="submit"
                                        class="btn btn-sm btn-primary"
                                    >
                                        Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    )}
                    <div class="timeline-body markdown-body">
                        {comment.bodyHtml as "safe"}
                    </div>
                    <ReactionBar
                        reactions={commentReactions.get(comment.id) ?? []}
                        postUrl={reactUrl}
                        commentId={comment.id}
                        user={user}
                    />
                </div>
            ))}

            {!!user && (
                <div class="timeline-item timeline-item-new">
                    <h3 class="section-title">Add a comment</h3>
                    <form method="POST" action={`${baseUrl}/comments`}>
                        <div class="form-group">
                            <textarea
                                name="body"
                                rows="6"
                                maxlength={config.MAX_TEXT_BODY_BYTES}
                                placeholder="Leave a comment (Markdown supported)"
                                required
                            />
                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn btn-primary">
                                Comment
                            </button>
                        </div>
                    </form>
                </div>
            )}
            {!user && (
                <p class="text-muted">
                    <a href="/login">Sign in</a> to leave a comment.
                </p>
            )}
        </>
    );
}