{% extends "base.html" %}

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

{% block header %}
{{ emit_tep('single_publisher_page_header', publisher_id=publisher_id) }}
{% endblock %}

{% block content %}

<div id="app">
    <publisher-jumbo v-bind:publisher="publisher"></publisher-jumbo>
    <volumes v-bind:volumes='volumes'></volumes>
</div>

{% endblock %}

{% block modals %}
{{ emit_tep('single_publisher_page_modals', publisher_id=publisher_id) }}
{% endblock %}

{% block button_container %}
{{ emit_tep('single_publisher_page_button_container', publisher_id=publisher_id) }}
{% endblock %}

{% block script %}

Vue.component('volumes', {
    props: ['volumes'],
    template: `
    <div>
        <div class="mb-3 px-5">
            <input type="text" v-model="search" class="form-control" placeholder="Search Publisher..." />
        </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>
        <!--
        <i class="text-primary fas fa-spinner fa-spin fa-3x" v-if="loading"></i>
        -->
    </div>
    `,
    data() { return { loading: true, search: '', } },
    computed: {
        filteredList() {
            return this.volumes.filter(volume => {
                return volume.volume_name.toLowerCase().includes(this.search.toLowerCase())
            })
        },
    },
    delimiters: ["[[","]]"],
})

Vue.component('volume-item', {
    props: ['volume'],
    template: `
    <li class='stashr-cover_size m-2'
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >
        <div class='stashr-poster_wrapper rounded'>
            <div class="stashr-badge_tl badge rounded-pill bg-info border">[[ volume.age_rating[0].rating_short ]]</div>
            <div class="stashr-badge_tr badge rounded-pill bg-primary border">[[ volume.volume_have ]]/[[ volume.volume_total ]]</div>
            <div class="stashr-badge_br badge rounded-pill border" :class="statusClass">[[ statusWord ]]</div>
            <div class="stashr-poster_container border rounded">
                <div class="stashr-overlay_bottom w-100 center" v-if="hover">
                    <a href="#">[[ volume.volume_name ]]</a>
                </div>
                <img class="stashr-poster_background w-100" loading="eager" src="/static/assets/cover.svg" />
                <a class="stashr-poster_link" :href="'/volumes/'+volume.volume_slug">
                    <img class="w-100" loading="lazy" v-bind:src="'/images/volumes/'+volume.volume_id+'.jpg'" @error="$event.target.src=volume.volume_image_med"/>
                </a>
            </div>
        </div>
    </li>
    `,
    computed: {
        statusClass() {
            let classname = 'bg-danger';
            if(this.volume.volume_status) {
                classname = 'bg-success';
            };
            return classname;
        },
        statusWord() {
            let status = 'ENDED';
            if(this.volume.volume_status) {
                status = 'ONGOING';
            };
            return status;
        }
    },
    data() { return { hover: false } },
    delimiters: ["[[","]]"],
})

Vue.component('publisher-jumbo', {
    props: ['publisher'],
    template: `
    <div class="row w-100 m-0">
        <div class='col-12 col-md-10 offset-md-1 p-2'>
            <div class='row'>
                <div class='col-12 col-md-2 p-2'>
                    <div class='row'>
                        <div class='col-10 offset-1'>
                            <!-- START POSTER -->
                            <div class="new-stashr_poster-wrapper border rounded">
                                <div class="stashr-poster_container rounded">
                                    <img class="stashr-poster_background w-100" src="/static/assets/cover.svg" id="poster-bg">
                                    <a class="rounded stashr-poster_link">
                                        <img class="rounded stashr-poster_image w-100" id="lazy-img" v-bind:src="publisher.publisher_image">
                                    </a>
                                </div>
                            </div>
                            <!-- END POSTER -->
                        </div>
                    </div>
                </div>
                
                <div class="col-12 col-md-10 p-2">
                    <div class="row w-100 bg-light rounded m-0 p-4">
                        <div class="col-12 col-md-10">
                            <div class="row">
                                <div class="col text-center text-md-start">
                                    <h1 class="stashr-series_title">[[ publisher.publisher_name ]]</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    `,
    computed: {},
    methods: {},
    created() {},
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        publisher: [],
        volumes: [],
    },
    created() {
        this.getPublisher();
        this.getVolumes();
    },
    methods: {
        getPublisher() {
            axios.get('{{ url_for('api.api_get_single_publisher', publisher_id=publisher_id) }}')
                .then(res => {
                    console.log(res)
                    if(res.data.status_code == 200) {
                        console.log('woooo')
                        this.publisher = res.data.results
                    } else {
                        displayToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log('boo-'+err))
        },
        getVolumes() {
            console.log('getting vols')
            axios.get('{{ url_for('api.api_get_single_publisher_volumes', publisher_id=publisher_id) }}', {
                params: {
                    offset: this.volumes.length
                }
            })
                .then(res => {
                    // console.log(res)
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.volumes.push(result)
                            this.publisher = this.volumes[0].publisher
                        });
                        if(this.volumes.length < res.data.number_of_total_results) {
                            this.getVolumes();
                        }
                    }
                })
                .catch(err => console.log('ERROR: ' + err))
            // this.publisher = this.volumes[0].publisher
        },
    },
    delimiters: ["[[","]]"]
})

{{ emit_tep('single_publisher_page_script', publisher_id=publisher_id) }}

{% endblock %}