package views

import (
	"fmt"
	"github.com/dominicf2001/comfychan/internal/database"
	"github.com/dominicf2001/comfychan/internal/util"
	"github.com/dominicf2001/comfychan/web/views/shared"
	"strconv"
)

templ PostOriginal(post database.Post, thread *database.Thread) {
	<article id={ fmt.Sprintf("post-%d", post.Id) } class="post-op">
		<div>
			File:
			<a href={ templ.URL("/static/img/posts/full/" + post.MediaPath) } class="post-filename">
				{ post.MediaPath }
			</a>
		</div>
		<img
			onclick="togglePostImage(this)"
			loading="lazy"
			src={ fmt.Sprintf("/static/img/posts/thumb/%s", post.MediaPath) }
			class="post-img"
		/>
		<header class="post-header">
			<h1 class="thread-subject">{ thread.Subject } -</h1>
			<span class="post-author">{ post.Author }</span>
			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
			<span
				_={ fmt.Sprintf("on click set #newPostBody.value to #newPostBody.value + '>>%d\n'", post.Id) }
				class=" post-num"
			>
				No.{ strconv.Itoa(post.Id) }
			</span>
			<span class="post-replies"></span>
		</header>
		<p class="post-body">
			@templ.Raw(util.EnrichPost(post.Body))
		</p>
	</article>
}

templ PostReply(post database.Post) {
	<article id={ fmt.Sprintf("post-%d", post.Id) } class="post">
		<header class="post-header">
			<span class="post-author">{ post.Author }</span>
			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
			<span
				_={ fmt.Sprintf("on click set #newPostBody.value to #newPostBody.value + '>>%d\n'", post.Id) }
				class=" post-num"
			>
				No.{ strconv.Itoa(post.Id) }
			</span>
			<span class="post-replies"></span>
		</header>
		if post.MediaPath != "" {
			<div>
				<div style="margin-bottom: 2px;">
					File:
					<a href={ templ.URL("/static/img/posts/full/" + post.MediaPath) } class="post-filename">
						{ post.MediaPath }
					</a>
				</div>
				<img
					onclick="togglePostImage(this)"
					loading="lazy"
					src={ fmt.Sprintf("/static/img/posts/thumb/%s",
			post.MediaPath) }
					class="post-img"
				/>
			</div>
		}
		<p class="post-body">
			@templ.Raw(util.EnrichPost(post.Body))
		</p>
	</article>
}

templ PostReplies(posts []database.Post) {
	for _, post := range (posts) {
		@PostReply(post)
		<br/>
	}
}

templ Thread(board database.Board, thread database.Thread, posts []database.Post) {
	@shared.Layout() {
		<script src="/static/thread.js" defer></script>
		@BoardHeader(board)
		<div class="new-post-container">
			<div style="display: none;" id="newPostWarning" class="warning">
				<p>Please wait until the 15 second cooldown is finished.</p>
			</div>
			<form
				hx-encoding="multipart/form-data"
				id="newPostForm"
				hx-swap="none"
				hx-post={ fmt.Sprintf("/%s/threads/%d",
		board.Slug, thread.Id) }
				_="on htmx:afterRequest 
					if event.detail.xhr.status is not 429
						set #newPostBody.value to '' 
						then set #newPostFile.value to '' 
						then hide #newPostWarning
						then trigger refreshPosts on body
					else
						show #newPostWarning
					end"
			>
				<table>
					<tbody>
						<tr class="new-post-form-field">
							<th>comment</th>
							<td><textarea id="newPostBody" name="body" required></textarea></td>
						</tr>
						<tr class="new-post-form-field">
							<th>File</th>
							<td><input id="newPostFile" name="file" type="file"/></td>
						</tr>
					</tbody>
				</table>
				<button type="submit">Submit</button>
			</form>
		</div>
		<div class="thread">
			@PostOriginal(posts[0], &thread)
			<div
				hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) }
				hx-trigger="refreshPosts from:body"
				_="on htmx:afterSwap call insertHeaderReplies()"
			>
				@PostReplies(posts[1:])
			</div>
		</div>
	}
}