Number.prototype.currency = function() { return '$' + this.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,') };
function ts_to_remaining(ts) {
    moment.locale('de');
    return moment.unix(ts).fromNow();
}

var app = new Vue({
    el: '#app',
    data: {
        title: "gt",
        queries: {},
        debug: false,
        account: false,
        new_account: "",
        search_visible: false,
        query: {
            url: null,
            search: null,
            maxprice: null,
            minprice: null,
            restricted: null,
            type: null
        }
    },

    mounted: function () {
        // hide splash
        var self = this;
        var splash = document.getElementById("splash");
        splash.style.display = "none";
        // unhide main container after mount
        this.$el.style.display = "block";
        this.update();
        window.addEventListener('hashchange', function() {
            self.update()
        }, false);

    },
    computed: {
        query_url: {
            get() {
                if (this.query.search || this.query.maxprice || this.query.minprice || this.query.restricted) {
                    var query = "http://www.egun.de/market/list_items.php?mode=qry&plusdescr=off";
                    if (this.query.search)              {query += "&query=" + this.query.search.replace(" ", "+");}
                    if (this.query.restricted)          {query += "&ewb=1";}
                    if (this.query.maxprice)            {query += "&maxprice=" + this.query.maxprice;}
                    if (this.query.minprice)            {query += "&minprice=" + this.query.minprice;}
                    if (this.query.type == 1)           {query += "&type=1";}
                    if (this.query.type == 2)           {query += "&type=2";}
                    return query;
                } else {
                    return this.query.url
                }
            },
            set(newVal){
                //this function will run whenever the input changes
                this.query.url = newVal;
            }
        }
    },
    
    methods: {
        update: function () {
            this.account = window.location.hash.slice(1)
            if (this.account) {
                // console.log(this.account);
                this.load_account();
            }
        },
        proxy_img: function (url) {
            console.log("proxy/" + encodeURIComponent(url));
            
            return "proxy/" + encodeURIComponent(url)
        },
        ordered_auctions: function () {
            return Object.values(this.queries)
                .map(q => 
                    
                    
                    Object.values(q.auctions).map(a => {
                        a.avg_price = q.avg_price;
                        return a;
                    })
                 )
                .flat()
                .sort(function(a, b) {
                    return a.timestamp - b.timestamp;
                })
            ;
    
        },
        load_account: function () {
            var self = this;
            fetch('load/' + self.account)
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                self.queries = myJson;
            });
        
        },
        display_query: function (queryname) {
            let q = queryname.split("query=")[1].split("&")[0].replace(/[+]/g, " ")
            return q
        },
        add_query: function () {

            
            this.$set(this.queries, this.query_url, {auctions:{}});
            // console.log(this.queries);
        },
        delete_query: function (queryname) {
            this.$delete(this.queries, queryname);
        },
        save_account: function () {
            let account = {}
            account[this.account] = {queries: this.queries};
            // console.log(JSON.stringify(account) );
            
            var self = this; 
            console.log("Saving");
            fetch("save/", {
              method: "POST", 
              body: JSON.stringify(account)
            }).then(res => {
              console.log("Request complete! response:", res);
              self.load_account();
            });
        }

    },

    
});