package components

import (
	"strconv"
)

templ Invoice(hash string, bolt11 string, msats int, expiresIn int, paid bool) {
    <div class="p-5 border border-muted bg-background text-center ">
        @Qr(bolt11, "lightning:"+bolt11)
        <small class="mx-auto w-[256px] my-1 break-words">{ bolt11 }</small>
        <div class="my-1">{ strconv.Itoa(msats/1000) } sats</div>
        if !paid {
            <div class="font-mono" id="countdown" countdown-data={ templ.JSONString(expiresIn)} hx-preserve></div>
            <script type="text/javascript">
            function countdown() {
                // a script that was included in a previous response might already be running the countdown
                if (typeof interval !== "undefined") return
                
                var $ = selector => document.querySelector(selector)
                var expiresIn = JSON.parse($("#countdown").getAttribute("countdown-data"))

                function pad(num, places) {
                    return String(num).padStart(places, "0")
                }
                
                function _countdown() {
                    var minutes = Math.floor(expiresIn / 60)
                    var seconds = expiresIn % 60
                    var text = `${pad(minutes, 2)}:${pad(seconds, 2)}`
                    $("#countdown").innerText = text
                    expiresIn--
                }

                _countdown()
                interval = setInterval(_countdown, 1000)
            }
            countdown()
            </script>
            <div
                hx-get={ string(templ.SafeURL("/invoice/" + hash)) }
                hx-trigger="load delay:1s"
                hx-target="#modal"
                hx-swap="outerHTML"
                hx-select="#modal" />
        } else {
            <div class="font-mono text-green">PAID</div>
        }
    </div>
}