package views

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

templ NewThreadForm(board database.Board) {
	<form
		hx-encoding="multipart/form-data"
		style="display: none;"
		id="newThreadForm"
		hx-swap="none"
		hx-post={ fmt.Sprintf("/%s/threads", board.Slug) }
		_="on htmx:afterRequest 
		hide me 
		then show #newThreadBtn 
		then set #newPostBody.value to '' 
		then set #newPostFile.value to '' 
		then trigger refreshThreads on body"
	>
		<table>
			<tbody>
				<tr class="new-post-form-field">
					<th>Subject</th>
					<td><input name="subject"/></td>
				</tr>
				<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" required/></td>
				</tr>
			</tbody>
		</table>
		<button type="submit">Submit</button>
	</form>
}

templ BoardHeader(board database.Board) {
	<header class="board-header">
		<img src={ fmt.Sprintf("/static/img/banners/%s.png", board.Slug) }/>
		<h1>
			{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
		</h1>
		<p>{ board.Tag }</p>
	</header>
}

templ Board(board database.Board) {
	@shared.Layout() {
		@BoardHeader(board)
		<div class="new-post-container">
			<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
			@NewThreadForm(board)
		</div>
		<div hx-get={ fmt.Sprintf("/hx/%s/catalog", board.Slug) } hx-trigger="load, refreshThreads from:body"></div>
	}
}

type CatalogThreadPreview struct {
	Subject   string
	Body      string
	ThreadURL string
	MediaPath string
}

templ ThreadsCatalog(previews []CatalogThreadPreview) {
	<div id="catalog">
		for _, preview := range previews {
			<div class="catalog-preview">
				<a href={ templ.URL(preview.ThreadURL) }>
					<img class="catalog-preview-img" src={ fmt.Sprintf("/static/img/posts/%s", preview.MediaPath) }/>
				</a>
				<h1>
					<a href={ templ.URL(preview.ThreadURL) } class="thread-subject catalog-preview-link">{ preview.Subject }</a>
				</h1>
				<p>
					@templ.Raw(util.EnrichPost(preview.Body))
				</p>
			</div>
		}
	</div>
}