@model WalletSendModel

<div class="form-group hide-when-js">
    <label asp-for="SelectedInputs" class="form-label"></label>
    <select multiple="multiple" asp-for="SelectedInputs" class="form-select">
        @foreach (var input in Model.InputsAvailable)
        {
            <option value="@input.Outpoint" class="text-truncate" asp-selected="@(Model.SelectedInputs?.Contains(input.Outpoint)??false)">(@input.Amount) @input.Outpoint</option>
        }
    </select>
</div>
<style>
    #coin-selection-app .btn-link { --btcpay-btn-color: var(--btcpay-body-text-muted); }
    #coin-selection-app .btn-link:hover { --btcpay-btn-color: var(--btcpay-body-link-accent); }
    #coin-selection-app .btn-link.active { --btcpay-btn-active-color: var(--btcpay-body-link); }
</style>
<div id="coin-selection-app" class="only-for-js" v-cloak>
    <div class="d-sm-flex justify-content-between align-items-center">
        <h5 class="mb-sm-0" text-translate="true">Coin selection</h5>
        <span class="text-muted text-end">
            <span>@StringLocalizer["{0} selected", "{{selectedItems.length}}"]</span>
            <span v-show="selectedItems.length > 0">({{selectedAmount}} @Model.CryptoCode)</span>
            <span>/ @StringLocalizer["{0} total", "{{items.length}}"] (@Model.CurrentBalance&nbsp;@Model.CryptoCode)</span>
        </span>
    </div>
    <input type="text" v-model="filter" class="form-control my-3" placeholder="@StringLocalizer["Filter by transaction id, amount, label, comment"]"/>
    <div class="d-flex gap-3 my-2 align-items-center">
        <span text-translate="true">Sort by</span>
        <div class="btn-group gap-3" role="group">
          <button type="button" class="btn btn-link p-0" :class="{active: sortOrder.startsWith('amount')}" v-on:click="sortBy('amount')" text-translate="true">Amount</button>
          <button type="button" class="btn btn-link p-0" :class="{active: sortOrder.startsWith('confs')}" v-on:click="sortBy('confs')" text-translate="true">Confirmations</button>
        </div>
    </div>
    <ul class="list-group list-group-flush mb-3" v-show="filteredItems.length">
        <li class="list-group-item py-2 cursor-pointer gap-2 align-items-center justify-content-between"
            v-for="item of filteredItems"
            :key="item.outpoint"
            :class="{ 'active': item.selected }"
            v-on:click="toggleItem($event, item, !item.selected)">
            <div class="d-flex align-items-start flex-grow-1 gap-2" style="min-width:0">
                <input class="form-check-input flex-shrink-0"
                       type="checkbox"
                       :id="item.outpoint"
                       :value="item.outpoint"
                       :checked="item.selected">
                <a :href="item.link" target="_blank" class="text-truncate flex-grow-1" v-tooltip="item.outpoint">{{item.outpoint}}</a>
                <div v-if="item.labels" class="d-flex flex-wrap gap-2 flex-fill" style="min-width:20%;max-width:40%;">
                    <span v-for="label of item.labels"
                       key="label.text"
                       class="transaction-label"
                       data-bs-toggle="tooltip"
                       v-tooltip="label.tooltip"
                       :style="styles(label.color)">
                        {{label.text}}
                    </span>
                </div>
                <span v-if="item.comment" data-bs-toggle="tooltip" v-tooltip="item.comment" class="badge bg-info rounded-pill" style="min-width:2em">
                    <vc:icon symbol="info" />
                </span>
                <span class="text-muted text-nowrap flex-shrink-0 ms-2">{{item.amount}} @Model.CryptoCode</span>
                <span :class="{'bg-secondary' : item.confirmations > 0, 'bg-warning' : item.confirmations <= 0}"
                      class="badge d-inline-flex align-items-center gap-1 py-1"
                      data-bs-toggle="tooltip"
                      v-tooltip="`${item.confirmations} confirmation${item.confirmations === 1 ? '' : 's'}`">
                    {{item.confirmations}} <vc:icon symbol="block" />
                </span>
            </div>
        </li>
    </ul>
    
    <div class="d-grid d-sm-flex flex-wrap gap-3 justify-content-between">
        <ul class="pagination">
            <li class="page-item" :class="{'disabled' : pageStart == 0}">
                <a class="page-link p-0" tabindex="-1" href="#" v-on:click.prevent="page = page -1">«</a>
            </li>
            <li class="page-item disabled">
                <span class="page-link p-0">@StringLocalizer["Showing {0} of {1}", "{{pageStart+1}}-{{pageEnd}}", "{{currentItems.length}}"]</span>
            </li>
            <li class="page-item" :class="{'disabled' : pageEnd>= currentItems.length}">
                <a class="page-link p-0" href="#" v-on:click.prevent="page = page +1">»</a>
            </li>
        </ul>
        <div class="btn-group gap-3">
            <button type="button" :disabled="selectedInputs.length === 0" v-on:click="showSelectedOnly = !showSelectedOnly; page = 0" class="btn btn-link p-0">
                <template text-translate="true" v-if="showSelectedOnly">Show all</template>
                <template text-translate="true" v-else>Show selected only</template>
            </button>
            <button type="button" :disabled="showSelectedOnly" v-on:click="showUnconfirmedOnly = !showUnconfirmedOnly; page = 0" class="btn btn-link p-0" v-if="hasUnconfirmed">
                <template text-translate="true" v-if="showUnconfirmedOnly">Show unconfirmed coins</template>
                <template text-translate="true" v-else>Hide unconfirmed coins</template>
            </button>
        </div>
        <div class="d-flex gap-2 align-items-center">
            <span class="text-muted" text-translate="true">Page Size:</span>
            <div class="btn-group gap-3" role="group">
              <button type="button" class="btn btn-link p-0" :class="{active: pageSize === 10}" v-on:click="pageSize = 10; page = 0">10</button>
              <button type="button" class="btn btn-link p-0" :class="{active: pageSize === 25}" v-on:click="pageSize = 25; page = 0">25</button>
              <button type="button" class="btn btn-link p-0" :class="{active: pageSize === 50}" v-on:click="pageSize = 50; page = 0">50</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.directive('tooltip', function(el, binding) {
        new bootstrap.Tooltip(el, {
            title: binding.value,
            placement: binding.arg || "auto",
            trigger: 'hover'
        });
    });

    function roundNumber(number, decimals) {
        var newnumber = new Number(number + '').toFixed(parseInt(decimals));
        return parseFloat(newnumber);
    }

    new Vue({
        el: '#coin-selection-app',
        data: {
            filter: "",
            items: @Safe.Json(Model.InputsAvailable),
            selectedInputs: $("#SelectedInputs").val(),
            page: 0,
            pageSize: 10,
            showSelectedOnly: false,
            showUnconfirmedOnly: false,
            sortOrder: 'amount-desc'
        },
        watch: {
            filter: function() {
                this.page = 0;
                this.handle();
            },
            showSelectedOnly: function() {
                this.handle();
            },
            selectedInputs: function() {
                this.handle();
            },
            showUnconfirmedOnly: function() {
                this.handle();
            }
        },
        computed: {
            currentItems: function() {
                const items = this.showSelectedOnly ? this.selectedItems : this.items.filter(i=> (!this.showUnconfirmedOnly || i.confirmations ));
                return this.sorted(items);
            },
            pageStart: function() {
                return this.page === 0 ? 0 : this.page * this.pageSize;
            },
            pageEnd: function() {
                var result = this.pageStart + this.pageSize;
                if (result > this.currentItems.length) {
                    result = this.currentItems.length;
                }
                return result;
            },
            hasUnconfirmed: function() {
                return this.items.filter(i => !i.confirmations).length > 0;
            },
            filteredItems: function() {
                var result = [];
                if (!this.filter && !this.showUnconfirmedOnly) {
                    var self = this;
                    result = this.currentItems.map(function(currentItem) {
                        return {...currentItem, selected: self.selectedInputs.indexOf(currentItem.outpoint) != -1
                        }
                    });
                } else {
                    var f = this.filter.toLowerCase();
                    for (var i = 0; i < this.currentItems.length; i++) {
                        var currentItem = this.currentItems[i];
                        if 
                            (currentItem.outpoint.indexOf(f) != -1 ||
                                                         currentItem.amount.toString().indexOf(f) != -1 ||
                                                         (currentItem.comment && currentItem.comment.toLowerCase().indexOf(f) != -1) ||
                                                         (currentItem.labels && currentItem.labels.filter(function(l) {
                                                             return l.text.toLowerCase().indexOf(f) != -1 || l.tooltip.toLowerCase().indexOf(f) != -1
                                                         }).length > 0)) {
                            result.push({...currentItem, selected: this.selectedInputs.indexOf(currentItem.outpoint) != -1
                            });
                        }
                    }
                }
                return result.slice(this.pageStart, this.pageEnd);
            },
            selectedItems: function() {
                var result = [];
                for (var i = 0; i < this.items.length; i++) {
                    var currentItem = this.items[i];

                    if (this.selectedInputs.indexOf(currentItem.outpoint) != -1) {
                        result.push(currentItem);
                    }
                }
                return result;
            },
            selectedAmount: function() {
                var result = 0;
                for (let i = 0; i < this.selectedItems.length; i++) {
                    result += this.selectedItems[i].amount;
                }
                return roundNumber(result, 12);
            }
        },
        mounted: function() {
            var self = this;
            self.selectedInputs = $("#SelectedInputs").val();
            $(".crypto-balance-link").text(this.selectedAmount);
            $("#SelectedInputs").on("input change", function() {
                self.selectedInputs = $("#SelectedInputs").val();
            });
        },
        methods: {
            sorted: function(items) {
                switch (this.sortOrder) {
                    case 'amount-desc': return items.sort((a, b) => b.amount - a.amount)
                    case 'amount-asc': return items.sort((a, b) => a.amount - b.amount)
                    case 'confs-desc': return items.sort((a, b) => b.confirmations - a.confirmations)
                    case 'confs-asc': return items.sort((a, b) => a.confirmations - b.confirmations)
                    default: return items;
                }
            },
            sortBy: function(type) {
                this.sortOrder = this.sortOrder === `${type}-desc` ? `${type}-asc` : `${type}-desc`
                // reset page
                this.page = 0;
            },
            handle: function() {
                if (this.selectedInputs.length == 0) {
                    this.showSelectedOnly = false;
                }
                if (this.currentItems.length < this.pageEnd) {
                    this.page = 0;
                }
            },
            toggleItem: function(evt, item, toggle) {
                if (evt.target.tagName == "A") {
                    return;
                }
                var res = $("#SelectedInputs").val();
                if (toggle) {
                    res.push(item.outpoint);

                } else {
                    res.splice(this.selectedInputs.indexOf(item.outpoint), 1);
                }

                $("select option").each(function() {
                    var selected = res.indexOf($(this).attr("value")) !== -1;
                    $(this).attr("selected", selected ? "selected" : null);
                });

                this.selectedInputs = res;
                $(".crypto-balance-link").text(this.selectedAmount);
            },
            styles: function (bgColor) {
                let color = 'inherit'
                if (bgColor.slice(0, 1) === '#') {
                    const hex = bgColor.slice(1);
                    // Convert to RGB value
                    const r = parseInt(hex.substr(0,2), 16);
                    const g = parseInt(hex.substr(2,2), 16);
                    const b = parseInt(hex.substr(4,2), 16);
                    // Get YIQ ratio
                    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
                    // Check contrast
                    color = (yiq >= 128) ? 'black' : 'white';
                }
                return { '--label-bg': bgColor, '--label-fg': color }
            }
        }
    });
});
</script>