package partials

import "fmt"

templ Comment(params CommentProps) {
	{{ elementId := SanitiseHtmlId(fmt.Sprintf("comment-%s-%s", params.Comment.Did, params.Comment.Rkey)) }}
	<div id={ elementId } class="flex flex-col gap-3" x-init="lucide.createIcons()">
		<div class="flex items-center justify-between">
			<div class="flex items-center gap-3">
				if params.Comment.BskyProfile.Avatar == "" {
					<div class="flex items-center justify-center w-10 h-10 rounded-full bg-primary">
						<i class="w-7 h-7" data-lucide="user"></i>
					</div>
				} else {
					<img src={ params.Comment.BskyProfile.Avatar } class="w-10 h-10 rounded-full"/>
				}
				<div>
					<div class="flex items-center gap-2">
						<a href={ templ.URL(fmt.Sprintf("/%s", params.Comment.Did)) } class="font-semibold">
							{ params.Comment.ProfileDisplayName }
						</a>
						<p class="pill pill-secondary px-2 py-0.5 h-fit items-center justify-center gap-1 w-fit flex">
							<i class="w-3.5 h-3.5" data-lucide="star"></i>
							<span class="text-xs">{ params.Comment.ProfileLevel }</span>
						</p>
						<span class="text-xs text-text-muted">{ params.Comment.CreatedAt.Format("2006-01-02") }</span>
					</div>
					<p class="text-text-muted text-sm">&commat;{ params.Comment.BskyProfile.Handle }</p>
				</div>
			</div>
			if params.DoesOwn {
				<details class="relative inline-block text-left">
					<summary class="cursor-pointer list-none">
						<div class="btn btn-muted p-2">
							<i class="w-4 h-4 flex-shrink-0" data-lucide="ellipsis"></i>
						</div>
					</summary>
					<div class="absolute flex flex-col right-0 mt-2 p-1 gap-1 rounded w-32 bg-bg-light border border-bg-dark">
						<button
							class="btn hover:bg-bg group justify-start px-2"
							type="button"
							id="edit-button"
							hx-disabled-elt="#delete-button,#edit-button"
							hx-target={ fmt.Sprintf("#comment-body-%s-%s", SanitiseHtmlId(params.Comment.Did), SanitiseHtmlId(params.Comment.Rkey)) }
							hx-swap="innerHTML"
							hx-get={ templ.URL(fmt.Sprintf("/comment/edit/%s", params.Comment.Rkey)) }
						>
							<i class="w-4 h-4" data-lucide="square-pen"></i>
							<span class="text-sm">Edit</span>
							<i class="w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" data-lucide="loader-circle"></i>
						</button>
						<button
							class="btn text-red-600 hover:bg-bg group justify-start px-2"
							type="button"
							id="delete-button"
							hx-disabled-elt="#delete-button,#edit-button"
							hx-target={ "#" + elementId }
							hx-swap="outerHTML"
							hx-delete={ templ.URL(fmt.Sprintf("/comment/%s", params.Comment.Rkey)) }
						>
							<i class="w-4 h-4" data-lucide="trash-2"></i>
							<span class="text-sm">Delete</span>
							<i class="w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" data-lucide="loader-circle"></i>
						</button>
					</div>
				</details>
			}
		</div>
		<p
			id={ fmt.Sprintf("comment-body-%s-%s", SanitiseHtmlId(params.Comment.Did), SanitiseHtmlId(params.Comment.Rkey)) }
			class="leading-relaxed break-words"
		>
			{ params.Comment.Body }
		</p>
		<button
			hx-swap="afterend"
			id="reply-button"
			type="button"
			hx-get={ templ.URL(fmt.Sprintf("/comment/reply?root=%s&parent=%s", params.Comment.StudySessionUri.String(), params.Comment.CommentAt().String())) }
			class="btn text-xs text-text-muted self-start w-fit p-0"
		>
			Reply
		</button>
		<div class="flex flex-col mt-2">
			for _, reply := range params.Comment.Replies {
				{{ isSelf := params.User != nil && params.User.Did == reply.Did }}
				@Reply(ReplyProps{
					Reply:   reply,
					DoesOwn: isSelf,
				})
			}
		</div>
	</div>
}