package components

import (
	"encoding/base64"
	"github.com/skip2/go-qrcode"
)

templ Qr(value string, href string) {
	if href != "" {
		<a
			class="mx-auto no-link"
			href={ templ.SafeURL(href) }
		>
			<img src={ "data:image/jpeg;base64," + qrEncode(value) }/>
		</a>
		<small class="flex my-1 mx-auto">
			<span class="block w-[188px] overflow-hidden">{ value }</span>
			<button id="copy" class="ms-1 button w-[64px]" hx-preserve>copy</button>
		</small>
		@CopyButton(value)
	} else {
		<img src={ "data:image/jpeg;base64," + qrEncode(value) }/>
	}
}

templ CopyButton(value string) {
	<div class="none" id="copy-data" copy-data={ templ.JSONString(value) } hx-preserve></div>
	<script type="text/javascript" id="copy-js" hx-preserve>
		var $ = selector => document.querySelector(selector)
		var value = JSON.parse($("#copy-data").getAttribute("copy-data"))
		$("#copy").onclick = function () {
			window.navigator.clipboard.writeText(value)
			$("#copy").textContent = "copied"
			setTimeout(() => $("#copy").textContent = "copy", 1000)
		}
	</script>
}

func qrEncode(value string) string {
	png, err := qrcode.Encode(value, qrcode.Medium, 256)
	if err != nil {
		return ""
	}
	return base64.StdEncoding.EncodeToString([]byte(png))
}