{% extends "base.html" %}

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

{% block header %}
{{ emit_tep('new_releases_page_header') }}
{% endblock %}

{% block content %}

<div id="app">
    <releases ref='releases' v-bind:releases='releaseList'></releases>
    <modals v-bind:volume='volume'></modals>
</div>

{% endblock %}

{% block button_container %}
<button type="button" class="btn btn-outline-info btn-circle btn-md" data-bs-toggle="tooltip" data-bs-placement="top" title="Update New Releases" onclick="app.updateNewReleases()">
    <i class="text-white fas fa-2x fa-sync-alt"></i>
</button>
{{ emit_tep('new_releases_page_button_container') }}
{% endblock %}

{% block script %}

Vue.component('modals', {
    props: [
        'volume'
    ],
    template: `
    <div>
        <div class="modal" id="modalSubscription" tabindex="-1" role="dialog" aria-labelledby="subscriptionModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="notesModalTitle">
                            [[ volume.new_release_comic_name ]] #[[ volume.new_release_issue_number ]]
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <a id="comic-have-link" class="btn btn-outline-primary" :href="volume.new_release_item_url" role="button" target="new">ComicVine Link</a>
                        <span id="subscribeSubscribed" v-if="volume.status">
                            <!-- SUBSCRIBED -->
                            <a id="comic-page" class="btn btn-outline-primary" :href="'{{ url_for('all_volumes_page') }}/' + volume.new_release_volume_id" role="button">Comic Page</a>
                        </span>
                        <span id="subscribeNotSubscribed" v-else>
                            <!-- NOT SUBSCRIBED -->
                            <button id="subscribeToVolume" class="btn btn-outline-primary" role="button" data-bs-dismiss="modal" @click='add_to_library'>Add to Library</button>
                        </span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {{ emit_tep('new_releases_page_modals') }}
    </div>
    `,
    methods: {
        add_to_library() {
            console.log('adding to library')
            app.$refs.releases.$children.find(child => { return child.$vnode.key == this.volume.new_release_id }).subscribe_to_volume()
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('release-item', {
    props: ['release'],
    template: `
    <li class='stashr-item_container m-2'
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >   
        <div class="stashr-poster_container border border-dark rounded-3" data-bs-toggle="modal" data-bs-target="#modalSubscription" v-on:click="this.changeModal">
            <div class="stashr-badge_top_left bg-info text-white px-1">
                #[[ release.new_release_issue_number ]]
            </div>
            <div class="stashr-badge_bottom_right bg-dark">
                <span class="fa-stack p-0">
                    <i class="fas fa-university fa-stack-1x" :class="className"></i>
                    <i class="fas fa-slash fa-stack-1x text-danger" v-if="!this.release.status"></i>
                </span>
            </div>
            <img class="stashr-background w-100" loading="eager" src="/static/assets/cover.svg" />
            <img class="stashr-poster w-100" loading="lazy" :src="release.new_release_image_url" />
            <div class="stashr-overlay_bottom w-100 text-center shadow" v-if="hover">
                [[ release.new_release_comic_name ]]
            </div>
        </div>
    </li>
    `,
    computed: {
        className() {
            let classname = 'text-danger';
            try {
                if (this.release.status) {
                    classname = 'text-success';
                }
            } finally {
                return classname;
            }
        },
        subText() {
            let text = 'Not In Library';
            try {
                if (this.release.status) {
                    text = 'In Library';
                }
            } finally {
                return text;
            }
        },
        subStatus() {
            let status = false;
            try {
                if (this.release.status) {
                    status = true;
                }
            } finally {
                return status
            }
        },
    },
    methods: {
        subscribe_to_volume() {
            axios.post('{{ url_for('api.api_post_single_volume', volume_id='VOLUMESTRING') }}'.replace('VOLUMESTRING', this.release.new_release_volume_id))
                .then(res => {
                    console.log(res)
                    if (res.data.status_code == 200) {
                        this.release.status = {'volume_status': true};
                        stashrToast('Added to Library', 'success')
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        changeModal() {
            app.changeModal(this.release)
        },
    },
    data () { return { hover: false, subscribed: false, } },
    delimiters: ["[[","]]"],
})

Vue.component('releases', {
    props: ['releases'],
    template: `
    <div>
        <div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
            <div class="row w-100 m-0 p-3">
                <input type="text" v-model="search" class="form-control" placeholder="Search New Releases..." />
            </div>
        </div>
        <!--
        <div class="mb-3 px-5">
            <input type="text" v-model="search" class="form-control" placeholder="Search New Releases..." />
        </div>
        -->
        <ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
            <release-item
                v-for="release in filteredList"
                v-bind:release="release"
                v-bind:key="release.new_release_id"
            ></release-item>
        </ul>
    </div>
    `,
    data() { return { search: '', } },
    computed: {
        filteredList() {
            return this.releases.filter(release => {
                return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase())
            })
        },
    },
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        releaseList: [],
        volume: [],
    },
    created() {
        this.getNewReleases()
    },
    methods: {
        getNewReleases(){
            axios.get('{{ url_for('api.api_get_new_releases') }}', {
                params: {
                    offset: this.releaseList.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.releaseList.push(result)
                        });
                        if(this.releaseList.length < res.data.number_of_total_results) {
                            this.getNewReleases()
                        }
                        
                    }
                })
        },
        updateNewReleases() {
            stashrToast('Updating New Releases', 'info')
            axios.post('{{ url_for('api.api_post_new_releases') }}')
                .then(res => {
                    if(res.data.status_code == '200') {
                        this.releaseList = [];
                        this.getNewReleases();
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        changeModal(volume) {
            console.log('changing modal')
            this.volume = volume
        }
    },
    delimiters: ["[[","]]"]
})

{{ emit_tep('new_releases_page_script') }}

{% endblock %}