{% extends "base.html" %}

{% block header_script_files %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock %}

{% block header %}
{{ emit_tep('all_volumes_page_header') }}

{% endblock %}

{% block content %}

<div class="hidden">
	<script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
				"{{ url_for('static', filename='/assets/cover.svg') }}"
			)
		//--><!]]>
	</script>
</div>

<div id="app">
    <volumes v-bind:volumes='volumesList' v-bind:publishers="publishers" v-bind:ratings="ratings"></volumes>
</div>

{% endblock %}

{% block modals %}
{{ emit_tep('all_volumes_modals') }}
{% endblock %}

{% block button_container %}
{% if current_user.role == 'admin' %}
<button type="button" class="btn btn-outline-info btn-circle btn-md" data-bs-toggle="tooltip" data-bs-placement="top" title="Add Volume from Comicvine" onclick="location.href='{{ url_for('search_page') }}';">
    <i class="text-white fas fa-2x fa-plus"></i>
</button>
{% endif %}
{{ emit_tep('all_volumes_button_container') }}
{% endblock %}

{% block script %}

Vue.component('publisher-item', {
    props: ['publisher'],
    template: `
    <option :value="publisher.publisher_id">[[ publisher.publisher_name ]]</option>
    `,
    delimiters: ["[[","]]"],
})

Vue.component('rating-item', {
    props: ['rating'],
    template: `
    <option :value="rating.rating_value">[[ rating.rating_long ]]</option>
    `,
    delimiters: ["[[","]]"],
})

Vue.component('volume-item', {
    props: ['volume'],
    template: `
    <li class='stashr-item_container m-2'
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >   
        <div class="stashr-poster_container border border-dark rounded-3">
            <div :class="volumeTag"></div>
            <div class="stashr-poster_info bg-info text-white px-1">
                [[ volume.age_rating[0].rating_short ]]
            </div>
            <div class="stashr-poster_wrapper">
                <a :href="'/volumes/'+volume.volume_slug">
                    <img class="stashr-background w-100" loading="eager" src="/static/assets/cover.svg" />
                    <img class="stashr-poster w-100" loading="lazy" v-bind:src="'/images/volumes/'+volume.volume_id+'.jpg'" />
                </a>
            </div>
            <div class="stashr-overlay_bottom w-100 text-center shadow" v-if="hover">
                <a class="stashr-link" :href="'/volumes/'+volume.volume_slug">
                    [[ volume.volume_name ]]
                </a>
            </div>
            <div class="stashr-progress_wrapper w-100">
                <div class="progress bg-dark" style="height: 5px;">
                    <div class="progress-bar" :class="progressColor" role="progressbar" :style="progressStyle" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </li>
    `,
    computed: {
        volumeTag() {
            let cornertag = '';
            if(!this.volume.volume_status) {
                cornertag = "stashr-poster_tag bg-danger shadow";
            }
            return cornertag;
        },
        progressWidth() {
            return (this.volume.volume_have / this.volume.volume_total)*100;
        },
        progressColor() {
            let classname = 'bg-success';
            if(this.volume.volume_status) {
                classname = 'bg-info';
            }
            if(this.progressWidth < 100) {
                classname = 'bg-danger';
            }
            return classname
        },
        progressStyle() {
            return "width: " + this.progressWidth + "%;"
        }
    },
    data() { return { hover: false } },
    delimiters: ["[[","]]"],
})

Vue.component('volumes', {
    props: ['volumes', 'ratings', 'publishers'],
    template: `
    <div>
        <div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
            <div class="row d-flex flex-nowrap w-100 m-0 p-3 bg-mine">
                <input type="text" v-model="search" class="form-control flex-shrink-1" placeholder="Search Volumes..." />
                <a class="fa-stack p-0 text-white">
                    <i class="fas fa-bars fa-stack-1x" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button"></i>
                </a>
            </div>
            <!--
            <div class="row d-flex flex-wrap w-100 m-0 p-0 stashr-submenu">
                <div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
                    <div class="d-flex flex-grow-1">
                        <i class="fas fa-2x fa-sort text-white mx-2"></i>
                        <select class="form-select" aria-label="Default select example" v-model="sorted">
                            <option value="volume_sort_title">Name</option>
                            <option value="volume_year">Year</option>
                            <option value="volume_total">Length</option>
                            <option value="progress">Progress</option>
                        </select>
                    </div>
                    <div class="d-flex flex-grow-1">
                        <i class="fas fa-2x fa-filter text-white mx-2"></i>
                        <select class="form-select" aria-label="Default select example" v-model="filter">
                            <option :value="''">All</option>
                            <option :value=false>Ended</option>
                            <option :value=true>Ongoing</option>
                        </select>
                    </div>
                </div>
                <div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
                    <div class="d-flex flex-grow-1">
                        <i class="fas fa-2x fa-filter text-white mx-2"></i>
                        <select class="form-select" aria-label="Default select example" v-model="rating">
                            <option :value="''">All</option>
                            <rating-item
                                v-for="rating in ratings"
                                v-bind:rating="rating"
                                v-bind:key="rating.rating_id"
                            ></rating-item>
                        </select>
                    </div>
                    <div class="d-flex flex-grow-1">
                        <i class="fas fa-2x fa-filter text-white mx-2"></i>
                        <select class="form-select" aria-label="Default select example" v-model="publisher">
                            <option :value="''">All</option>
                            <publisher-item
                                v-for="publisher in publishers"
                                v-bind:publisher="publisher"
                                v-bind:key="publisher.publisher_id"
                            ></publisher-item>
                        </select>
                    </div>
                </div>
            </div>
            -->
        </div>
        <ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
            <volume-item
                v-for="volume in filteredList"
                v-bind:volume="volume"
                v-bind:key="volume.volume_id"
            ></volume-item>
        </ul>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasRightLabel">Sort/Filter</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="m-3">
                    <div class="my-2">
                        <i class="fas fa-sort"></i>
                        <strong>Sort</strong>
                    </div>
                    <select class="form-select" aria-label="Default select example" v-model="sorted">
                        <option value="volume_sort_title">Name</option>
                        <option value="volume_year">Year</option>
                        <option value="volume_total">Length</option>
                        <option value="progress">Progress</option>
                    </select>
                </div>
                <div class="m-3">
                    <div class="my-2">
                        <i class="fas fa-filter"></i>
                        <strong>Volume Status</strong>
                    </div>
                    <select class="form-select" aria-label="Default select example" v-model="filter">
                        <option :value="''">All</option>
                        <option :value=false>Ended</option>
                        <option :value=true>Ongoing</option>
                    </select>
                </div>
                <div class="m-3">
                    <div class="my-2">
                        <i class="fas fa-filter"></i>
                        <strong>Publisher</strong>
                    </div>
                    <select class="form-select" aria-label="Default select example" v-model="publisher">
                        <option :value="''">All</option>
                        <publisher-item
                            v-for="publisher in publishers"
                            v-bind:publisher="publisher"
                            v-bind:key="publisher.publisher_id"
                        ></publisher-item>
                    </select>    
                </div>
                <div class="m-3">
                    <div class="my-2">
                        <i class="fas fa-filter"></i>
                        <strong>Age Rating</strong>
                    </div>
                    <select class="form-select" aria-label="Default select example" v-model="rating">
                        <option :value="''">All</option>
                        <rating-item
                            v-for="rating in ratings"
                            v-bind:rating="rating"
                            v-bind:key="rating.rating_id"
                        ></rating-item>
                    </select>
                </div>
            </div>
        </div>
    </div>
    `,
    data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title', rating: '', publisher: ''} },
    computed: {
        filteredList() {
            if (this.sorted.toLowerCase() == 'progress') {
                return this.volumes
                    .filter(volume => { return volume.volume_name.toLowerCase().includes(this.search.toLowerCase()) })
                    .filter(volume => { return volume.volume_status.toString().includes(this.filter) })
                    .filter(volume => { return volume.publisher.publisher_id.toString().includes(this.publisher) })
                    .sort((a, b) => (a.volume_have / a.volume_total) - (b.volume_have / b.volume_total))
            } else {
                return this.volumes
                    .filter(volume => { return volume.volume_name.toLowerCase().includes(this.search.toLowerCase()) })
                    .filter(volume => { return volume.volume_status.toString().includes(this.filter) })
                    .filter(volume => { return volume.publisher.publisher_id.toString().includes(this.publisher) })
                    .filter(volume => { return volume.volume_age_rating.toString().includes(this.rating) })
                    .sort((a, b) => a[this.sorted] - b[this.sorted])
            }
        },
    },
    delimiters: ["[[","]]"],
})

var app = new Vue({
    el: '#app',
    data: {
        volumesList: [],
        ratings: [],
        publishers: [],
    },
    created() {
        this.getVolumes();
        this.getPublishers();
        this.getRatings();
    },
    methods:{
        getRatings() {
            axios.get('{{ url_for('api.api_get_all_ratings') }}')
                .then(res => {
                    this.ratings = res.data.results;
                })
                .catch(err => console.log(err))
        },
        getPublishers() {
            axios.get('{{ url_for('api.api_get_all_publishers') }}', {
                params: {
                    offset: this.publishers.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.publishers.push(result)
                        })
                        if(this.publishers.length < res.data.number_of_total_results) {
                            this.getPublishers()
                        }
                    }
                })
        },
        getVolumes() {
            axios.get('{{ url_for('api.api_get_all_volumes') }}', {
                params: {
                    offset: this.volumesList.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.volumesList.push(result)
                        })
                        if(this.volumesList.length < res.data.number_of_total_results) {
                            this.getVolumes()
                        }
                    }
                })
        },
    },
    delimiters: ["[[","]]"]
});

{{ emit_tep('all_volumes_page_script') }}

{% endblock %}