package masterkelainan

import (
	"cpone/component/table"
	"cpone/models"
	"strconv"
)

templ TableKelainan(data []models.Kelainan,
	tableID string,
	hxGetActive string,
	hxSwapActive string,
	hxGetNonActive string,
	hxSwapNonActive string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,
	hxGetSelected string,
	hxTargetSelected string,
) {
	<div id={ tableID } hx-swap-oob="true">
		@tablecomponent.TableV3([]string{"NO", "GRUP KELAINAN", "AKSI"},
			[]string{"10%", "60%", "30%"},
			TableRow(data,
				hxGetActive,
				hxSwapActive,
				hxGetNonActive,
				hxSwapNonActive,
				hxGetDelete,
				hxTargetDelete,
				hxSwapDelete,
				hxIncludeDelete,
				hxGetSelected,
				hxTargetSelected,
			))
	</div>
}

script clickHandler(id string) {
	document.getElementById("sas"+id).classList.add("selected");
	console.log(id);
}

script HandleAfterRequesX(idx string) {
	document.querySelectorAll("tr.selected").forEach(function(row) {
        row.classList.remove("selected");
    });
	document.getElementById("sas"+idx).classList.add("selected");
	 console.log('handle after',idx);
}

templ TableRow(data []models.Kelainan,
	hxGetActive string,
	hxSwapActive string,
	hxGetNonActive string,
	hxSwapNonActive string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,
	hxGetSelected string,
	hxTargetSelected string,
) {
	if len(data) == 0 {
		<tr>
			<td colspan="3" class="text-center">Data Tidak Ditemukan</td>
		</tr>
	}
	for _, v := range data {
		<tr
			id={ "sas" + strconv.Itoa(v.Mcu_KelainanGroupID) }
			hx-get={ hxGetSelected + "?id=" + strconv.Itoa(v.Mcu_KelainanGroupID) }
			hx-trigger="click"
			hx-include={ "#selectedID, #paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableID, #tableDetailID, #paginationDetailID, #searchDetailID, #dialogDetailDeleteBodyID, #dialogDetailDeleteID, #sas" + strconv.Itoa(v.Mcu_KelainanGroupID) }
			onclick={ clickHandler(strconv.Itoa(v.Mcu_KelainanGroupID)) }
			hx-target={ hxTargetSelected }
			hx-on::after-request={ HandleAfterRequesX(strconv.Itoa(v.Mcu_KelainanGroupID)) }
			hx-swap="none"
		>
			<td>{ v.Nomor }</td>
			<td>{ v.Mcu_KelainanGroupName }</td>
			<td>
				@TableAction("#active"+strconv.Itoa(v.Mcu_KelainanGroupID),
					v.Mcu_KelainanGroupID,
					v.Mcu_KelainanGroupFlagActive,
					hxGetActive,
					hxSwapActive,
					hxGetNonActive,
					"#non"+strconv.Itoa(v.Mcu_KelainanGroupID),
					hxSwapNonActive,
					hxGetDelete,
					hxTargetDelete,
					hxSwapDelete,
					hxIncludeDelete,
				)
			</td>
		</tr>
	}
}

templ TableAction(
	idrowactive string,
	id int,
	flag string,
	hxGetActive string,
	hxSwapActive string,
	hxGetNonActive string,
	idrownonactive string,
	hxSwapNonActive string,
	hxGetDelete string,
	hxTargetDelete string,
	hxSwapDelete string,
	hxIncludeDelete string,
) {
	<div class="row px-5 d-flex justify-content-around">
		switch flag {
			case "Y":
				<a
					id={ "active" + strconv.Itoa(id) }
					type="button"
					class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
					hx-get={ hxGetActive + "?id=" + strconv.Itoa(id) + "&selectedStatus=" + flag }
					hx-target={ idrowactive }
					hx-swap={ hxSwapActive }
					hx-include={ "#paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableID, #active" + strconv.Itoa(id) }
				>
					Aktif
				</a>
			case "N":
				<a
					id={ "non" + strconv.Itoa(id) }
					type="button"
					class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
					hx-get={ hxGetNonActive + "?id=" + strconv.Itoa(id) + "&selectedStatus=" + flag }
					hx-target={ idrownonactive }
					hx-swap={ hxSwapNonActive }
					hx-include={ "#paginationID, #dialogDeleteBodyID, #dialogDeleteID, #tableID, #non" + strconv.Itoa(id) }
				>
					Tidak
				</a>
			default:
				<span>{ "Unknown Flag" }</span>
		}
		<a
			id="btndeleteug"
			type="button"
			class=" btndeleteug col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
			hx-get={ hxGetDelete + "?id=" + strconv.Itoa(id) }
			hx-target={ hxTargetDelete }
			hx-swap={ hxSwapDelete }
			hx-include={ hxIncludeDelete }
		>
			Hapus
		</a>
	</div>
}

templ CustomButtonTidak(inp models.ButtonPrm) {
	<a
		id={ inp.ID }
		type="button"
		class={ inp.Class }
		hx-get={ inp.HxGet }
		hx-target={ inp.HxTarget }
		hx-swap={ inp.HxSwap }
		hx-include={ inp.HxInclude }
	>
		{ inp.Label }
	</a>
}
