{% extends "base.html" %}

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

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

{% block content %}

<div id="app">
    <modal ref="modal" v-bind:individual="individual"></modal>
    <directories v-bind:directories='directories'></directories>
</div>

{% endblock %}

{% block modals %}
{{ emit_tep('scrape_page_modals') }}
{% 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="Add Selected Directories" onclick="app.addDirectories()">
    <i class="text-white fas fa-2x fa-plus"></i>
</button>
<button type="button" class="btn btn-outline-info btn-circle btn-md" data-bs-toggle="tooltip" data-bs-placement="top" title="Rescan New Directories" onclick="app.rescanDirectories()">
    <i class="text-white fas fa-2x fa-sync-alt"></i>
</button>
{{ emit_tep('scrape_page_button_container') }}
{% endblock %}

{% block script %}

Vue.component('candidate', {
    props: ['candidate', 'individual'],
    template: `
    <option :value="[[ candidate.id ]]">
        [[ candidate.name ]] - [[ candidate.id ]]
    </option>
    `,
    delimiters: ["[[","]]"]
})

Vue.component('modal', {
    props: ['individual'],
    template: `
    <div>
        <div class="modal" id="modalScrape" data-something="" tabindex="-1" role="dialog" aria-labelledby="subscriptionModal" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="notesModalTitle">
                            <span id="subscriptionName">Folder - [[ individual.scrape_directory ]]</span>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-3">
                                <div class="stashr-poster_container border rounded">
                                    <img class="stashr-poster_background w-100" loading="eager" src="/static/assets/folder.svg" />
                                    <a class="stashr-poster_link">
                                        <img class="w-100" :src="[[ match['image']['small_url'] ]]" loading="lazy"/>
                                    </a>
                                </div>
                            </div>
                            <div class="col-9">
                                <select id="selectVolume" class="form-select" aria-label="Default select example" @change='doSomething($event)' v-if='!this.individual.scrape_add'>
                                    <candidate
                                        v-for="item in json"
                                        v-bind:candidate="item"
                                        v-bind:individual="this.individual"
                                        v-bind:key="item['id']"
                                    ></candidate>
                                </select>
                                <div class='py-2'>
                                    <h5>[[ match['name'] ]] ([[ match['start_year'] ]])</h5>
                                    <p v-html="match['description']"></p>
                                </div>
                            </div>
                        </div>
                        <!--
                            <select class="form-select" aria-label="Default select example">
                                <option selected>Open this select menu</option>
                                <option value="1">One</option>
                                <option value="2">Two</option>
                                <option value="3">Three</option>
                            </select>
                        -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        {{ emit_tep('scrape_page_directory_modals') }}
    </div>
    `,
    updated() {
        this.setTest();
    },
    computed: {
        match() {
            return JSON.parse(this.individual.scrape_json).filter(item => {
                return item['id'] == this.individual.scrape_candidate
            })[0]
        },
        json() {
            return JSON.parse(this.individual.scrape_json)
        },
    },
    methods: {
        doSomething(something) {
            console.log(something.target.value)
            this.individual.scrape_candidate = something.target.value
        },
        setTest() {
            console.log('in here')
            this.test = JSON.parse(this.individual.scrape_json).filter(item => {
                return item['id'] == this.individual.scrape_candidate
            })[0]
            document.getElementById('selectVolume').value = this.individual.scrape_candidate
        }
    },
    delimiters: ["[[","]]"]
})

Vue.component('directory', {
    props: ['directory'],
    template: `
    <li class='stashr-cover_size m-2'
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >
    <div class='stashr-poster_wrapper rounded' v-on:click="changeModal()">
        <div class="stashr-badge_tl badge badge-pill badge-info border"></div>
        <div class="stashr-badge_br badge badge-pill border"></div>
        <div class="stashr-poster_container border rounded">
            <div class="stashr-check_box p-1">
                <a @click='changeChecked'>
                    <i :class='checkedStatus'></i>
                    <!--
                    <i class="text-info fa-2x fas fa-circle"></i>
                    <i class="text-success fa-2x fas fa-check-circle"></i>
                    -->
                </a>
            </div>
            <div class="stashr-overlay_bottom w-100 center">
                <span>[[ directory.scrape_directory ]]</span>
            </div>
            <div data-bs-toggle="modal" data-bs-target="#modalScrape">
                <img class="stashr-poster_background w-100" loading="eager" src="/static/assets/folder.svg" />
                <a class="stashr-poster_link">
                    <img class="w-100" :src="imageURL" loading="lazy"/>
                </a>
            </div>
        </div>
    </div>
    </li>
    `,
    computed: {
        imageURL() {
            return JSON.parse(this.directory.scrape_json).filter(item => {
                return item['id'] == this.directory.scrape_candidate
            })[0]['image']['small_url']
        },
        checkedStatus() {
            string = `text-info fa-2x fas fa-circle`
            if(this.directory.scrape_add) {
                string = `text-success fa-2x fas fa-check-circle`
            }
            return string
        },
    },
    methods: {
        changeModal() {
            app.changeModal(this.directory)
        },
        changeChecked() {

            axios.put('{{ url_for('api.api_put_directories_edit', scrape_id='SCRAPEID') }}'.replace('SCRAPEID', this.directory.scrape_id), {
                data: {
                    scrape_add: !this.directory.scrape_add,
                    scrape_candidate: this.directory.scrape_candidate
                }
            })
                .then(res => {
                    console.log(res)
                    if(res.data.status_code == 200) {
                        this.directory.scrape_add = !this.directory.scrape_add
                        // stashrToast('Updated Inforamtion', 'info')
                    }
                })
        },
    },
    data() { return { hover: false, scraped: false, } },
    delimiters: ["[[","]]"]
})

Vue.component('directories', {
    props: ['directories'],
    template: `
    <div>
        <div class="mb-3 px-5">
            <input type="text" v-model="search" class="form-control" placeholder="Search Folders..." />
        </div>
        <ul class="d-flex flex-wrap w-100 m-0 p-0 justify-content-center">
            <directory
                v-for="directory in filteredList"
                v-bind:directory="directory"
                v-bind:key="directory.scrape_id"
            ></directory>
        </ul>
    </div>
    `,
    data() { return { search: '', } },
    computed: {
        filteredList() {
            return this.directories.filter(directory => {
                return directory.scrape_directory.toLowerCase().includes(this.search.toLowerCase())
            })
        },
    },
    methods: {},
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        directories: [],
        individual: [],
    },
    created() {
        this.getDirectories();
    },
    methods: {
        getDirectories() {
            axios.get('{{ url_for('api.api_get_directories') }}', {
                params: {
                    offset: this.directories.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.directories.push(result)
                        });
                        if(this.directories.length < res.data.number_of_total_results) {
                            this.getDirectories()
                        }
                    }
                    this.individual = this.directories[0]
                })
                .catch(err => console.log(err))
        },
        rescanDirectories() {
            stashrToast('Rescanning Directories', 'info');
            axios.post('{{ url_for('api.api_post_directories_scan') }}')
                .then(res =>{
                    if(res.data.status_code == '200') {
                        this.directories = [];
                        this.getDirectories();
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
                .catch(err => console.log(err))
        },
        changeModal(directory) {
            this.individual = directory
        },
        addDirectories() {
            axios.post('{{ url_for('api.api_post_directories_add') }}')
                .then(res => {
                    if(res.data.status_code == 200) {
                        stashrToast('Adding Directories')
                    }
                })
        },
    },
    delimiters: ["[","]]"]
})

{{ emit_tep('scrape_page_script') }}

{% endblock %}