<template>
    <div class="uk-container">
        
            <div class="uk-margin" uk-margin>
                <ul class="uk-pagination" v-if="chapter">
                    <li @click="prev"><a class="text-primary" href="#"><span class="uk-margin-small-right" uk-pagination-previous></span> Previous Chapter</a></li>
                    <li class="uk-margin-auto-left" @click="next"><a class="text-primary" href="#">Next Chapter<span class="uk-margin-small-left" uk-pagination-next></span></a></li>
                </ul>
            </div>
    </div>
</template>
<script>
import _ from 'lodash';
import {mapGetters} from 'vuex'

export default {
    components:{
    },  
  data: function(){
                return {
                progress: 0,
                loading: false,

            }},
            computed: {
                translations(){
                    return this.$store.state.saved_translations;
                },
                saved_translations(){
                    console.log(this.$store.state.saved_translations);
                    return this.$store.state.saved_translations
                },
                ...mapGetters(['chapters', 'chapter']),
                fchapters: function (){
                    if(!this.search)
                    return this.chapter.verses
                    return this.filteredChapters
                },
                filteredChapters() {
                    return _.orderBy(this.chapter.verses.filter((item) => 
                            item.verse.toString().toLowerCase().includes(this.search.toLowerCase())
                        || item.chapter.toString().toLowerCase().includes(this.search.toLowerCase())
                        || item.name.toString().toLowerCase().includes(this.search.toLowerCase())
                        || item.text.toLowerCase().includes(this.search.toLowerCase())), 'verse');
                    },
            },
            methods:{
                t(i){
                    return this.translations.find(t =>  t.abbreviation === i)
                },  
                next(){
                    if(this.chapter<this.chapters.length)
                    this.$store.dispatch('set_chapter', this.chapter + 1)
                },
                prev(){
                    if(this.chapter>1)
                    this.$store.dispatch('set_chapter', this.chapter - 1)
                },
                async update_chapter() {
                    // this.loading = true
                    this.progress = 95
                    let config = {
                    headers: {'Access-Control-Allow-Origin': '*'}
                                };
            
                    let url =  `https://getbible.net/v2/${this.translation}/${this.book}/${this.chapter_num}.json`
                    
                    let response = await fetch(url, config).catch(function(err) {
                            this.chapter = err
                            this.loading =false
                            this.message = 'Error'
                            
                        });

                    if (!response) return;

                    this.progress = 99
                    let data = await response.json().catch(err => {
                                                    this.chapter = err
                                                    this.loading =false
                                                    this.message = 'Error'
                                                })
                    this.loading =false
                        
                    if (!data) return;

                    this.chapter = data
                    this.progress =0

                },
                async update_tr(){

                },
                async update_bk(){
                    let config = {
                    headers: {'Access-Control-Allow-Origin': '*'}
                };
                    this.loading =true
                    this.progress =25
                    this.message = 'Loading...'
                    let url = `https://getbible.net/v2/${this.translation}/books.json`
                    fetch(url,config)
                    .then(response => response.json())
                    .then(data => {
                        // console.log(data)
                        this.books = data
                        this.progress = 60
                        this.update_ch();
                    }).catch(function(err) {
                        this.chapter = err
                        this.loading =false
                        this.message = 'Error'
                    });
                
                },
                async update_ch(){
                    let config = {
                    headers: {'Access-Control-Allow-Origin': '*'}
                };
                    fetch(`https://getbible.net/v2/${this.translation}/${this.book}/chapters.json`,config)
                    .then(response => response.json())
                    .then(data => {
                        // console.log(data)
                        this.chapters = data
                        this.progress = 85
                        this.update_chapter();
                    }).catch(function(err) {
                        this.chapter = err
                        this.loading =false
                        this.message = 'Error'
                    });
                }
            },

}
</script>