var TR_EN = {
    'title': 'bow',
    'comment': 'comment' 
};


function shortenParagraph(paragraph) {
    var sentences = paragraph.split('.');
    // console.log(sentences);
    return sentences[0] + '. ' + sentences[sentences.length - 2] + '.';
    
}

Vue.component('article-new', {
    props: [],
    computed: {
        
        title: function() {
            var sstr = this.defaultArticle.url.split('/');
            var t = sstr[sstr.length -1];
            this.defaultArticle.title = t;
            this.summary;
            return t;
        },
        
        summary: function() {
            if (this.defaultArticle.title === undefined || this.defaultArticle.title == '') {
                console.log('undefined title');
                this.defaultArticle.summary = '';
                return;
            }
            
            
            var keyword = this.defaultArticle.title;
            var searchUrl = 'https://en.wikipedia.org/w/api.php?format=json&origin=*&action=query&prop=extracts&exintro=&explaintext=&titles=' + keyword;
            var self = this;
            
            var query = function() {
                var xhr = new XMLHttpRequest();
                xhr.onload = function() {
                    var data = {};
                    try {
                        data = JSON.parse(xhr.responseText);
                    } catch(e){
                        console.log('could not parse JSON');
                    }
                    
                    var pages = {};
                    if ('query' in data) {
                        if ('pages' in data.query) {
                            pages = data.query.pages;
                        }
                    }
                    
                    for (var p in pages) {
                        if ('extract' in pages[p]) {
                            self.defaultArticle.summary = pages[p].extract;
                            self.defaultArticle.title = pages[p].title;
                            self.defaultArticle.id = pages[p].pageid;
                        }
                    }
                    
                };
                
                xhr.open('GET', searchUrl, true);
                
                try {
                    xhr.send();
                } catch(e) {
                    console.log('err');
                }
            }
            _.debounce(query, 2000, {leading: true})();

            // query();
            return '';
        },
        
    },
    methods: {
        addArticle : function() {
            if (this.defaultArticle.url == '') {
                return;
            }
            
            app.articles.push(JSON.parse(JSON.stringify(this.defaultArticle)));
            this.defaultArticle = {
                title: undefined,
                summary: '',
                url: '',
                id: ''
            }
        },
    },
    data: function () {
        return {
            defaultArticle: {
                title: undefined,
                summary: '',
                url: '',
                id: ''
            },
        };
    },
    
    
    template: '\
    <div class="add">\
    Search wikipedia or paste URL\
    <input placeholder="url" v-model="defaultArticle.url" />\
    <button v-if="defaultArticle.summary" type="button" @click="addArticle();writeToDB();">Add</button>\
    <div class="title">{{title}}</div>\
    <div class="summary">{{defaultArticle.summary}}</div>\
    </div>'
});



var app = new Vue({
    // router,
    el: '#app',
    data: {
        defaultArticle: {
            title: '',
            summary: '',
            url: ''
        },
        articles : [],
        tr: TR_EN,
        compact: false
    },
    mounted: function () {
        var splash = document.getElementById("splash");
        splash.style.display = "none";
        // unhide main container after mount
        this.$el.style.display = "block";
        
        var firebaseConfig = {
            apiKey: "AIzaSyAl00bG_4Qt8AEV-aXIHy2o2m7fJfbmoRc",
            authDomain: "bestof-1.firebaseapp.com",
            databaseURL: "https://bestof-1.firebaseio.com",
            projectId: "bestof-1",
            storageBucket: "bestof-1.appspot.com",
            messagingSenderId: "115676832898"
        };
        
        firebase.initializeApp(firebaseConfig);
        readTaskData();
    },
    computed: {
        articles: function() {
            // Just a wrapper so we can sort later
            return this.articles;
        },
        ready: function() {
            return this.articles.length > 0;
        }
    },
    
    methods: {
        getLink: function(article) {
            if (article.id) {
                return 'https://en.wikipedia.org/?curid=' + article.id;
            }
            return article.url;
        } 
    },
    
    watch: {
    },
});


// FIREBASE DB ////////////////////////////////////////////////////
function writeToDB() {
    firebase.database().ref('articles').set(app.articles);
}

function readTaskData() {
    var t = firebase.database().ref('articles');
    t.on("value", function(snapshot) {
        var a = snapshot.val();
        // var tasks = snapshot.val();
        if (Array.isArray(a)) {
            app.articles = a;
        }
    }, function (error) {
        console.log("Error: " + error.code);
    });
    
}