<template id="address-data">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
    <style>
        .address-data-table td {
            text-align: left;
            margin-top: 0;
        }
        .descriptor {
            max-width: 500px;
            white-space: -moz-pre-wrap;
            white-space: -o-pre-wrap;
            white-space: pre-wrap;
            word-wrap: break-word;
            margin: auto;
        }
    </style>
    <div class="address-data">
        <h1>{{ _("Address details") }}</h1><br>
        <div class="address-data-info"></div>
        <div class="note"></div>
    </div>
</template>
  
<script type="text/javascript">
    class AddressDataElement extends HTMLElement {
        constructor() {
            super();
            // Create a shadow root
            var shadow = this.attachShadow({mode: 'open'});
            var style = document.getElementById('address-data').content;
            var clone = style.cloneNode(true);

            this.el = clone.querySelector(".address-data");
            this.note = clone.querySelector(".note");
            this.info = clone.querySelector(".address-data-info");
            this.isVerifyQR = this.getAttribute('data-verify-qr') == 'True';
            this.isVerifyHwi = this.getAttribute('data-verify-hwi') == 'True';
            this.used = (this.getAttribute('data-used') == 'true');
            this.utxo = this.getAttribute('data-utxo');
            this.amount = this.getAttribute('data-amount');
            this.amountPrice = this.getAttribute('data-amount-price');
            this.address = this.getAttribute('data-address');
            this.wallet = this.getAttribute('data-address-wallet');
            this.note.innerText = `{{ _("Loading address") }}: ${this.address} {{ _("details") }}...`;
            this.fetchAddressData();
        
            // Attach the created element to the shadow dom
            shadow.appendChild(clone);
        }

        async fetchAddressData() {
            let url = `{{ url_for('wallets_endpoint.addressinfo', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
            var formData = new FormData();
            formData.append('address', this.address);
            formData.append('csrf_token', '{{ csrf_token() }}');
            try {
                const response = await fetch(
                    url,
                    {
                        method: 'POST',
                        body: formData
                    }
                );
                if(response.status != 200){
                    showError(await response.text());
                    return;
                }
                const jsonResponse = await response.json();
                if (jsonResponse.success) {
                    console.log(jsonResponse);
                    let descriptor = jsonResponse.descriptor;
                    let addressIndex = jsonResponse.index;
                    let isChange = jsonResponse.change;
                    let walletName = jsonResponse.walletName;
                    let address = jsonResponse.address;
                    let walletLink = `{{ url_for('wallets_endpoint.wallet', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", this.wallet);
                    let addressInfoHTML = `
                    <qr-code style="margin: auto;" value="bitcoin:${address}" width="256"></qr-code><br>
                    <table class="address-data-table">
                    <tbody>
                    <tr><td>{{ _("Address") }}:</td><td style="word-break: break-all;"><explorer-link data-type="address" data-value="${address}"></explorer-link></td></tr>
                    <tr><td>{{ _("Label") }}:</td><td><address-label data-copy-hidden="true" data-address="${address}" data-wallet="${this.wallet}"></address-label><br></td></tr>
                    <tr><td>{{ _("From wallet") }}:</td><td><a href=${walletLink}>${walletName}<a></td></tr>
                    <tr><td>{{ _("Address index") }}:</td><td>${addressIndex}</td></tr>
                    <tr><td>{{ _("Is change address") }}:</td><td>${isChange ? '{{ _("Yes") }}' : '{{ _("No") }}'}</td></tr>
                    <tr><td>{{ _("Used") }}:</td><td>${this.used ? 'Yes' : 'No'}</td></tr>
                    <tr><td>{{ _("UTXO count") }}:</td><td>${this.utxo}</td></tr>
                    <tr><td>{{ _("Amount") }}:</td><td>${this.amount} <span class="amount-price note ${this.amountPrice ? '' : 'hidden'}">${this.amountPrice}</span></td></tr>
                    </tbody>
                    </table>
                    `

                    if (this.isVerifyHwi) { 
                        addressInfoHTML += `
                        <br>
                        <button type="button" onclick='hidePageOverlay();displayAddressOnDevice("${address}", unescape("${escape(JSON.stringify(descriptor))}"))' class="btn" style="min-width:200px; max-width:300px; margin: auto;">{{ _("Verify address on device") }}</button>`;
                    }

                    if (this.isVerifyQR) { 
                        addressInfoHTML += `
                        <p>{{ _("Or scan this QR code") }}:</p>
                        <qr-code value="bitcoin:${address}?index=${addressIndex}" width="256" scalable></qr-code><br>`;
                    }

                    addressInfoHTML += `
                    <br>
                    <h2>{{ _("Address descriptor") }}</h2>
                    <br>
                    <div>
                        <span class="switch-text">{{ _("Show raw public keys") }}&nbsp;</span>
                        <label class="switch">
                            <input type="checkbox" class="descriptor-switch" checked>
                            <span class="slider"></span>
                        </label><br><br>
                    </div>
                    <pre class="descriptor"><code class="explorer-link" onclick='copyText(unescape("${escape(descriptor.descriptor)}"), "{{ _("Copied address descriptor") }}")'>${descriptor.descriptor}</code></pre>
                    `;
                    this.info.innerHTML = addressInfoHTML;
                    this.note.innerText = "";

                    this.info.querySelector('.descriptor-switch').onchange = (e) => {
                        if (e.target.checked) {
                            this.info.querySelector(".descriptor").innerHTML = `<code class="explorer-link" onclick='copyText(unescape("${escape(descriptor.descriptor)}"), "{{ _("Copied address descriptor") }}")'>${descriptor.descriptor}</code>`;
                        } else {
                            this.info.querySelector(".descriptor").innerHTML = `<code class="explorer-link" onclick='copyText(unescape("${escape(descriptor.xpubs_descriptor)}"), "{{ _("Copied address descripto") }}")'>${descriptor.xpubs_descriptor}</code>`;
                        }
                    }

                    return;
                }
                this.note.innerText = '{{ _("Failed to load address details...") }}';
            } catch(e) {
                this.note.innerText = '{{ _("Failed to load address details...") }}';
                console.error(e);
            }
        }
    }
    customElements.define('address-data', AddressDataElement);
</script>
