package customtextfieldautocomplete;

import (
	"cpone/layout"
	"cpone/models"
)

templ MainCustomAutoComplete(value string) {
	<div id="initial" class="form-group">
		<input
			class="form-control bg-field"
			type="text"
			autocomplete="off"
			placeholder="Search Data..."
			id="searchAutocomplete"
			name="searchAutocomplete"
			hx-get="/client/autocomplete"
			hx-trigger="input changed delay:500ms, search"
			hx-target="#hasilAutoComplete"
			hx-indicator="#indicator"
			value={ value }
		/>
		<div id="hasilAutoComplete">
			<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		</div>
	</div>
}

templ ListCustomAutoCompleteHide() {
	<div id="hasilAutoComplete"></div>
}

templ ListCustomAutoComplete(limit string, param string, totalDataInt int, foundCount int, pageOf string, textFound string, data []models.AutoComplete) {
	<div id="contentList" class="bootstrap-autocomplete dropdown-menu-custom bg-white show">
		if len(data) == 0 {
			<a class="dropdown-item" href="#" style="overflow: hidden; text-overflow: ellipsis;">Data Tidak Ditemukan</a>
		} else {
			for _, d := range data {
				<a
					hx-trigger="click"
					hx-get={ "/client/autoCompleteSetValue/" + d.Name }
					hx-swap="outerHTML"
					hx-target="#initial"
					class="dropdown-item"
					style="overflow: hidden; text-overflow: ellipsis;"
				>{ d.Name }</a>
			}
		}
		<div class="container px-4">
			<div class="row mb-4">
				<div id="indicator" class="position-absolute d-flex justify-content-center spinner-border htmx-indicator" style="z-index: 99;" role="status">
					<span class="sr-only">Loading...</span>
				</div>
			</div>
			<div class="row align-items-center">
				<div class="col-md-6">
					<p style="font-style: italic; margin: 0; text-align: left;">{ textFound }</p>
				</div>
				<div class="col-md-6 d-flex justify-content-end">
					if foundCount == totalDataInt {
						<a href="#" class="btn btn-link-primary text-primary mr-2 disabled">Show More</a>
					} else {
						<a
							href="#"
							hx-get={ "/client/autoCompleteLoadMore/" + pageOf + "/" + param + "/" + limit }
							hx-trigger="click"
							hx-target="#contentList"
							hx-swap="outerHTML"
							hx-select="#contentList"
							hx-indicator="#indicator"
							class="text-dark-75 text-hover-primary mr-2"
						>Show More</a>
					}
				</div>
			</div>
		</div>
	</div>
}

templ JsCustomAutoComplete() {
}

templ CssCustomAutoComplete() {
	<style>
	.htmx-indicator{
		display:none;
	}
	.htmx-request .htmx-indicator{
		display:inline;
		opacity:1;
	}
	.htmx-request.htmx-indicator{
		display:inline;
		opacity:1;
	}

    .dropdown-menu-custom {
        /* position: absolute; */
        /* top: 100%; */
        /* left: 0; */
        /* z-index: 1000; */
        /* display: none; */
        width: 100%;
        float: left;
        min-width: 10rem;
        padding: 0.5rem 0;
        margin: 0.125rem 0 0;
        font-size: 1rem;
        /* color: #212529; */
        text-align: left;
        list-style: none;
        /* background-color: #fff; */
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 0.25rem;
      }
    </style>
}

templ ShowCustomAutoComplete(title string, cmp templ.Component, css templ.Component, js templ.Component) {
	@layout.PlaygroundLayout(title, css, js) {
		@cmp
	}
}
