package categories

import (
	"net/http"
	"soko/pkg/app/layout"
	"soko/pkg/models"
	"strconv"
	"strings"
)

func packageLetter(name string) string {
	return strings.ToLower(strings.TrimLeft(name, "_")[:1])
}

script filter() {
	const value = document.querySelector("#filter").value.toLowerCase();
	const rows = document.querySelectorAll("#table tr");
	for (let i = 0; i < rows.length; i++) {
		rows[i].style.display = rows[i].cells[0].innerText.toLowerCase().includes(value) ? "" : "none";
	}
}

templ showPackages(categoryName string, packages []packageInfo) {
	<div class="row">
		<div class="col-12">
			<div class="row">
				<div class="col-md-9">
					<p>
						<input onKeyup={ filter() } id="filter" type="text" class="form-control form-control-xl" placeholder={ "Search packages in " + categoryName }/>
					</p>
					<div class="card border-top-0 rounded">
						<table class="table mb-0 rounded" id="table">
							for i, pkg := range packages {
								<tr
									if i == 0 || packageLetter(pkg.Package) != packageLetter(packages[i-1].Package) {
										id={ packageLetter(pkg.Package) }
									}
								>
									<th class="kk-nobreak-cell"><a href={ templ.URL("/packages/" + categoryName + "/" + pkg.Package) }>{ pkg.Package }</a></th>
									<td>{ pkg.Description }</td>
								</tr>
							}
						</table>
					</div>
					@filter()
				</div>
				<div class="col-md-3">
					<h4>Statistics</h4>
					<dd class="ml-3">
						<dl>Packages: { strconv.Itoa(len(packages)) }</dl>
					</dd>
					<h4 class="mt-4">Filter by Category</h4>
					<div class="row pl-4 pr-5 mr-5">
						for i, pkg := range packages {
							if i == 0 || packageLetter(pkg.Package) != packageLetter(packages[i-1].Package) {
								<div class="col-md-2 px-2">
									<a href={ templ.URL("#" + packageLetter(pkg.Package)) } class="text-muted text-capitalize">
										{ packageLetter(pkg.Package) }
									</a>
								</div>
							}
						}
					</div>
				</div>
			</div>
		</div>
	</div>
}

templ show(component templ.Component) {
	<div class="container mb-5 tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
		@component
	</div>
}

func renderShowPage(w http.ResponseWriter, r *http.Request, currentTab string, category *models.Category, component templ.Component) {
	layout.TabbedLayout(category.Name, layout.Packages, category.Name, "fa fa-fw fa-cubes", category.Description, []layout.SubTab{
		{
			Name: "Packages",
			Link: templ.URL("/categories/" + category.Name),
			Icon: "fa fa-list-ul mr-1",
		},
		{
			Name:       "Stabilization",
			Link:       templ.URL("/categories/" + category.Name + "/stabilization"),
			Icon:       "fa fa-check-circle-o mr-1",
			BadgeValue: strconv.Itoa(category.PackagesInformation.StableRequests),
		},
		{
			Name:       "Outdated",
			Link:       templ.URL("/categories/" + category.Name + "/outdated"),
			Icon:       "fa fa-tag mr-1",
			BadgeValue: strconv.Itoa(category.PackagesInformation.Outdated),
		},
		{
			Name:       "Pull requests",
			Link:       templ.URL("/categories/" + category.Name + "/pull-requests"),
			Icon:       "octicon octicon-git-pull-request opticon-resource-icon ml-1",
			BadgeValue: strconv.Itoa(category.PackagesInformation.PullRequests),
		},
		{
			Name:       "Bugs",
			Link:       templ.URL("/categories/" + category.Name + "/bugs"),
			Icon:       "fa fa-bug",
			BadgeValue: strconv.Itoa(category.PackagesInformation.Bugs),
		},
		{
			Name:       "Security",
			Link:       templ.URL("/categories/" + category.Name + "/security"),
			Icon:       "fa fa-shield",
			BadgeValue: strconv.Itoa(category.PackagesInformation.SecurityBugs),
		},
	}, currentTab, show(component)).Render(r.Context(), w)
}