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 font-mono">
        <div>Payment Required</div>
        <div class="my-3">@Qr(bolt11, "lightning:"+bolt11)</div>
        <div class="my-1">{ strconv.Itoa(msats/1000) } sats</div>
        @InvoiceStatus(hash, expiresIn, paid)
        <div class="none" id="bolt11" bolt11-data={ templ.JSONString(bolt11) } hx-preserve></div>
        <script type="text/javascript" id="bolt11-js" hx-preserve>
            var $ = selector => document.querySelector(selector)
            var bolt11 = JSON.parse($("#bolt11").getAttribute("bolt11-data"))
            console.log(bolt11)
        </script>
    </div>
}

templ InvoiceStatus(hash string, expiresIn int, paid bool) {
    if paid {
        <div class="font-mono label success my-1">PAID</div>
    }
    else if expiresIn <= 0 {
        <div class="font-mono label error my-1">EXPIRED</div>
    } else {
        <!-- invoice is pending -->
        <div class="font-mono my-1" id="countdown" countdown-data={ templ.JSONString(expiresIn) } hx-preserve></div>
        <script type="text/javascript" id="countdown-js" hx-preserve>
            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)}`
                try {
                    $("#countdown").innerText = text
                    expiresIn--
                } catch {
                    // countdown element disappeared
                    clearInterval(interval)
                }
            }

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