package homeview

import "github.com/tigorlazuardi/redmage/views/components"
import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/utils"
import "strconv"

templ Home(c *views.Context, data Data) {
	@components.Doctype() {
		@components.Head(c, components.HeadTitle("Redmage - Home"))
		@components.Body(c) {
			@HomeContent(c, data)
		}
	}
}

// HomeContent returns the main content of the home page.
//
// Use this template if request is HX-Boosted.
templ HomeContent(c *views.Context, data Data) {
	<main id="main" class="prose min-w-full">
		@components.Container() {
			if data.Error != "" {
				@components.ErrorToast(data.Error)
			} else {
				<section class="mb-4 mx-auto">
					<div
						class="flex content-center gap-8"
						hx-get="/"
						hx-target="main"
						hx-select="main"
						hx-swap="outerHTML"
						hx-trigger="change"
						hx-include="this"
						hx-push-url="true"
					>
						<h1>
							Recently Added -
							{ strconv.FormatInt(data.TotalImages, 10) } Images
						</h1>
						@recentRangeInput(c)
						@nsfwToggle(c, data)
					</div>
					if data.TotalImages == 0 {
						<h2 class="mt-4">There are no recently added images in the current time range.</h2>
					}
					for _, recently := range data.RecentlyAddedImages {
						<div class="divider"></div>
						<h2 class="mt-4">{ recently.Device.Name }</h2>
						for _, subreddit := range recently.Subreddits {
							<h4>{ subreddit.Subreddit.Name } - { strconv.Itoa(len(subreddit.Images)) } images</h4>
							@RecentlyAddedImageList(subreddit.Images, 0)
						}
					}
				</section>
				<section>
					<h1>Subreddits</h1>
					for _, subreddit := range data.SubredditsList.Data {
						<h3>
							{ subreddit.Name } - 
							@utils.RelativeTimeNode(subreddit.Name, utils.NextScheduleTime(subreddit.Schedule).Unix())
						</h3>
					}
				</section>
			}
		}
	</main>
}

templ recentRangeInput(c *views.Context) {
	<select
		name="created_at"
		class="select select-ghost select-bordered"
	>
		@recentlyRangeOption(c, "-10800", "3 Hours")
		@recentlyRangeOption(c, "-21600", "6 Hours")
		@recentlyRangeOption(c, "-43200", "12 Hours")
		@recentlyRangeOption(c, "-86400", "1 Day")
		@recentlyRangeOption(c, "-172800", "2 Days")
		@recentlyRangeOption(c, "-259200", "3 Days")
		@recentlyRangeOption(c, "-604800", "7 Days")
		@recentlyRangeOption(c, "-2592000", "30 Days")
	</select>
}

templ recentlyRangeOption(c *views.Context, value, text string) {
	if c.Request.URL.Query().Get("created_at") == "" && value == "-86400" {
		<option selected="selected" value={ value }>{ text }</option>
	} else if c.Request.URL.Query().Get("created_at") == value {
		<option selected="selected" value={ value }>{ text }</option>
	} else {
		<option value={ value }>{ text }</option>
	}
}

templ nsfwToggle(c *views.Context, data Data) {
	<select
		name="sfw"
		class="select select-ghost select-bordered"
	>
		if (c.Request.URL.Query().Get("sfw") == "1") || data.SFW {
			<option value="0">NSFW - ON</option>
			<option selected="selected" value="1">NSFW - Off</option>
		} else {
			<option selected="selected" value="0">NSFW - ON</option>
			<option value="1">NSFW - Off</option>
		}
	</select>
}