package public_toast

import (
	"cpone/layout"
)

// kalau eror => bg nya danger
// kalau sukses => bgnya success
// kalau warning => bgnya warning

func toastBackgroundKartuKontrol(typeToast string) string {
	return "bg-" + typeToast
}

func toastBodyKartuKontrol(typeToastBody string) string {
	return "bg-" + typeToastBody + "-transparent"
}

func toastIconKartuKontrol(typeToast string) string {
	var stringx string
	if typeToast == "success" {
		stringx = "solar:check-circle-broken"
	} else {
		if typeToast == "danger" {
			stringx = "solar:close-circle-broken"
		} else {
			if typeToast == "warning" {
				stringx = "solar:shield-warning-bold"
			} else {
				if typeToast == "information" {
					stringx = "solar:info-square-broken"
				}
			}
		}
	}

	return stringx
}

templ PublicToastV1KartuKontrolShow(title string, message string, typeToast string) {
	<div
		class="toast fade show"
		role="alert"
		aria-live="assertive"
		aria-atomic="true"
		id="notification-kartukontrol-001"
		hx-swap-oob="true"
		hx-get="hidetoastkartukontrol"
		hx-trigger="load delay:3s"
		hx-target="this"
		style="border-radius: 8px 8px 8px 8px;"
	>
		<div class={ "toast-header",  toastBackgroundKartuKontrol(typeToast) , "text-white" }>
			<span
				class="iconify mr-2"
				data-icon={ toastIconKartuKontrol(typeToast) }
			></span>
			<strong class="mr-auto">{ title }</strong>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
				<span aria-hidden="true">×</span>
			</button>
		</div>
		<div class={ "toast-body",toastBodyKartuKontrol(typeToast) }>
			{ message }
		</div>
	</div>
}

templ PublicToastV1KartuKontrolHide() {
	<div
		id="notification-kartukontrol-001"
		class="toast fade hide"
		role="alert"
		aria-live="assertive"
		aria-atomic="true"
		style="opacity: 0"
		hx-swap-oob="true"
	>
		<div class="toast-header bg-success text-white">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--ep mr-2 icon-xl" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1024" data-icon="ep:success-filled"><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896a448 448 0 0 1 0-896m-55.808 536.384l-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.27 38.27 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336z"></path></svg>
			<strong class="mr-auto">Success</strong>
			<small class="text-muted text-white">just now</small>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
				<span aria-hidden="true">×</span>
			</button>
		</div>
		<div class="toast-body bg-success-transparent">
			This is a success toast.
		</div>
	</div>
}

templ EmptyDiv() {
	<div></div>
}

templ ShowToastKartuKontrol(title string, cmp templ.Component, css templ.Component, js templ.Component) {
	@layout.CorporateLayout(title, css, js, EmptyDiv(), EmptyDiv(), EmptyDiv()) {
		@cmp
	}
}
