@using BTCPayServer.Abstractions.TagHelpers
@using BTCPayServer.Plugins.SideShift
@using Microsoft.AspNetCore.Mvc.TagHelpers
@inject SideShiftService SideShiftService
@{

    var coins = await SideShiftService.GetSettleCoins();
    coins = coins.Where(tuple => new[] {SideShiftService.CoinType.VariableOnly, SideShiftService.CoinType.Both}.Contains(tuple.Type)).ToList();
    if(coins.Any() is not true)
    {
        return;
    }
}
<script>

const ssAvailableCoins = @Json.Serialize(coins.ToDictionary(tuple=> $"{tuple.CryptoCode}_{tuple.Network}",tuple =>
    new {
        coin = tuple.DisplayName,
        code = tuple.CryptoCode,
        memo = tuple.HasMemo,
        network = tuple.Network
    }));
document.addEventListener('DOMContentLoaded', (event) => {
    if (new URLSearchParams(window.location.search).has("hidejunk")) {
        localStorage.setItem('hidejunk', 'true');
    }
    if(localStorage.getItem("hidejunk")) {
        
        [...document.querySelectorAll("#ExplicitMethods option")].forEach(option => {
            const text = option.innerText.toLowerCase();
    
            // Check if the option matches the criteria
            const isMatch = (text.includes("bitcoin") || text.includes("tether") || text.includes("usd")) && 
                            !text.includes("bitcoincash");
    
            // If it matches, show it; otherwise, hide it
            option.style.display = isMatch ? '' : 'none';
        });
    }
    // const sideshiftDestinationButton = document.createElement("button");
    // sideshiftDestinationButton.type= "button";
    // sideshiftDestinationButton.className = "btn btn-primary btn-sm";
    // sideshiftDestinationButton.innerText = "Generate SideShift destination";
    // document.getElementById("add-prism").insertAdjacentElement("afterend", sideshiftDestinationButton);
    
    // const modal = new bootstrap.Modal('#sideshiftModal');
    // sideshiftDestinationButton.addEventListener("click", ev => modal.show());
    const selectedSideShiftCoin = document.getElementById("sscoin");
    const specifiedSideShiftDestination = document.getElementById("ssdest");
    const specifiedSideShiftMemo= document.getElementById("ssmemo");
    const shiftButton = document.getElementById("ssshift");
    let selectedCoin = null;
    const destinationContainer = document.getElementById("ss-dest-info");
    specifiedSideShiftDestination.addEventListener("input", ev1 => {
        
        document.getElementById("ss-result").style.display = "none";
        if (isValid()){
            shiftButton.removeAttribute("disabled");
        }
    });
    specifiedSideShiftMemo.addEventListener("input", ev1 => {
        if (isValid()){
            shiftButton.removeAttribute("disabled");
        }else{
            shiftButton.setAttribute("disabled", "disabled");
        }
    });
    isValid = ()=>{
      return selectedCoin && specifiedSideShiftDestination.value && 
       (!selectedCoin.memo || specifiedSideShiftMemo.value);
    };
    handleSelectChanges = ()=>{
        if (selectedSideShiftCoin.value){     
            selectedCoin = ssAvailableCoins[selectedSideShiftCoin.value];
            destinationContainer.style.display =  "block";
            if (selectedCoin){ 
                specifiedSideShiftMemo.parentElement.style.display = selectedCoin.memo ? "block" : "none";
                specifiedSideShiftMemo.value = selectedCoin.memo ? specifiedSideShiftMemo.value : "";
            }
        }else{
            destinationContainer.style.display = "none";
        }
    };
    selectedSideShiftCoin.addEventListener("change", ev1 => {     
        handleSelectChanges();
    });
    shiftButton.addEventListener("click", ev1 => { 
        
        document.getElementById("ss-server-errors").innerHTML = "";
        document.getElementById("ss-result-txt").value = "";
        document.getElementById("ss-result-additional-info").value = "";
        if (isValid()){
            shiftButton.setAttribute("disabled", "disabled");
            const type = "permanent";
            
            if (type ==="permanent"){
                fetch("https://sideshift.ai/api/v2/shifts/variable",{
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({
                        settleAddress: specifiedSideShiftDestination.value,
                        settleMemo: specifiedSideShiftMemo.value,
                        affiliateId: "qg0OrfHJV",
                        depositCoin : "BTC",
                        depositNetwork : "lightning",
                        settleCoin: selectedCoin.code,
                        settleNetwork: selectedCoin.network,
                        permanent: true
                    })})
                    .then(async response => {
                        if (!response.ok){
                            try {
                                document.getElementById("ss-server-errors").innerHTML = (await response.json())["error"]["message"];
                            }catch{
                                document.getElementById("ss-server-errors").innerHTML = JSON.stringify((await response.json()));
                            }
                            return;
                        }
                        const shift =  await response.json();
                        document.getElementById("ss-result").style.display = "block";
                        document.getElementById("ss-result-txt").value = shift.depositAddress;
                        const link = `https://sideshift.ai/orders/${shift.id}`;
                        document.getElementById("ss-result-additional-info").innerHTML = "<b>IMPORTANT:</b> You must keep this link to be able to recover your funds in case of a problem. <a href='"+link+"' target='_blank'>"+link+"</a>  ";
                        
                    })
                    .catch(error => document.getElementById("ss-server-errors").innerHTML =  error)
                    .finally(() => shiftButton.removeAttribute("disabled"));
            }else{
                document.getElementById("ss-result").style.display = "block";
                document.getElementById("ss-result-txt").value = "sideshift:"+JSON.stringify({
                        shiftCoin:selectedCoin.code,
                        shiftNetwork: selectedCoin.network,
                        shiftDestination: specifiedSideShiftDestination.value,
                        shiftMemo: specifiedSideShiftMemo.value
                });
                shiftButton.removeAttribute("disabled");
            }
            
            
            
        }
        
    });
    
    
    handleSelectChanges();
    
});
</script>

<div class="modal" tabindex="-1" id="sideshiftModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Generate SideShift destination</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        
                        <div id="ss-server-errors" class="text-danger"></div>
                        <p>This will generate a piece of code based on Sideshift configuration that can work as a valid destination in prism. Prism will then generate a "shift" on Sideshift and send the funds through LN to it, and Sideshift will send you the conversion. </p>
                        <div class="form-group">
                            <label class="form-label">Which coin should Sideshift send you</label>
                            <select id="sscoin" class="form-select">
                                @foreach (var opt in coins)
                                {
                                    <option value="@($"{opt.CryptoCode}_{opt.Network}")">@opt.ToString()</option>
                                }
                            </select>
                        </div>
                        <div id="ss-dest-info" style="display: none">
                            <div class="form-group">
                                <label class="form-label">Destination</label>
                                <input type="text" id="ssdest" class="form-control"/>

                            </div>
                            <div class="form-group">
                                <label class="form-label">Memo</label>
                                <input type="text" id="ssmemo" class="form-control"/>

                            </div>

                            <button type="button" class="btn btn-primary" id="ssshift" disabled="disabled">Generate code</button>

                            <div id="ss-result" class="form-group mt-4" style="display: none;">
                                <label class="form-label">Generated code</label>
                                <div class="input-group">
                                    <input type="text" id="ss-result-txt" class="form-control" readonly="readonly"/>
                                    <button type="button" class="btn btn-secondary" data-clipboard-target="#ss-result-txt">
                                        <vc:icon symbol="copy"/>
                                    </button>
                                </div>
                                <p id="ss-result-additional-info"></p>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>