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 BoardHeader(board database.Board) {
	<header class="board-header">
		<img src={ fmt.Sprintf("/static/media/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 load hide #newPostForm 
				on click hide me then show #newPostForm"
				id="newThreadBtn"
			>[New Thread]</button>
			@shared.NewPostForm(board, fmt.Sprintf("/%s/threads", board.Slug), true)
		</div>
		<hr/>
		<div id="boardActionBar">
			<span>Image size: </span>
			<select onchange="resizeCatalogPreviewImgs()" id="selectSortBy">
				<option selected value="small">Small</option>
				<option value="large">Large</option>
			</select>
			<input style="margin-left: 10px;" oninput="applyCatalogSearch()" id="catalogSearch" placeholder="Search"/>
		</div>
		<hr/>
		<div
			hx-get={ fmt.Sprintf("/hx/%s/catalog", board.Slug) }
			hx-trigger="load, refreshPosts from:body"
			_="on htmx:afterRequest 
				call resizeCatalogPreviewImgs()
				then call applyCatalogSearch()"
		></div>
	}
}

type CatalogThreadPreview struct {
	Subject    string
	Body       string
	ThreadURL  string
	ThumbPath  string
	ReplyCount int
	IpCount    int
}

templ ThreadsCatalog(previews []CatalogThreadPreview) {
	<div id="catalog">
		for _, preview := range previews {
			{{ replyCount := strconv.FormatInt(int64(preview.ReplyCount), 10) }}
			{{ ipCount := strconv.FormatInt(int64(preview.IpCount), 10) }}
			<div class="catalog-preview">
				<a href={ templ.URL(preview.ThreadURL) }>
					<img
						loading="lazy"
						class="catalog-preview-img"
						src={ fmt.Sprintf("/static/media/posts/thumb/%s",
				preview.ThumbPath) }
					/>
				</a>
				<strong class="catalog-preview-counts">R: { replyCount } / I: { ipCount }</strong>
				<h1>
					<a href={ templ.URL(preview.ThreadURL) } class="catalog-preview-link">{ preview.Subject }</a>
				</h1>
				<p>
					@templ.Raw(util.EnrichPost(preview.Body))
				</p>
			</div>
		}
	</div>
}