{% extends "settings_page.html" %}

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

{% block settings_pane %}

<div id="app">
    <plugins ref="plugins" v-bind:plugins="plugins"></plugins>
    <modals v-bind:plugin="plugin"></modals>
</div>

{% endblock %}

{% block script %}

Vue.component('modals', {
    props: ['plugin'],
    template: `
    <div>
        <div class="modal" id="modalUpload" tabindex="-1" role="dialog" aria-labelledby="notesModal" 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">
                            Upload Plugin
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="input-group mb-3">
                                <input id="pluginupload" type="file" accept=".zip" name="plugin" @change='uploadFile' required="required" class="form-control">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="modalPlugin" tabindex="-1" role="dialog" aria-labelledby="notesModal" 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">
                            [[ plugin.plugin_name ]]
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <strong>Version:</strong> [[ plugin.plugin_version ]]<br />
                        <strong>Author:</strong> [[ plugin.plugin_author ]]<br />
                        [[ plugin.plugin_description ]]
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn" v-bind:class="pluginClass" data-bs-dismiss="modal" @click="togglePlugin">[[ pluginAction ]]</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#deletePlugin">Delete</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" id="deletePlugin" tabindex="-1" role="dialog" aria-labelledby="notesModal" 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">
                            Delete Plugin
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete [[ plugin.plugin_name ]]
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" @click="deletePlugin">Delete</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
    computed: {
        pluginClass() {
            let classname = 'btn-warning';
            if(this.plugin.plugin_state == 'disabled') {
                classname = 'btn-success';
            };
            return classname;
        },
        pluginAction() {
            let text = 'Disable';
            if(this.plugin.plugin_state == 'disabled') {
                text = 'Enable';
            };
            return text;
        }
    },
    methods: {
        uploadFile() {
            let formData = new FormData();
            var pluginfile = document.querySelector('#pluginupload');
            formData.append("file", pluginfile.files[0]);
            bootstrap.Modal.getInstance(document.getElementById('modalUpload')).hide();
            stashrToast('Uploading Plugin', 'info');
            axios.post('{{ url_for('api.api_post_upload_plugin') }}', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })
                .then(res => {
                    if(res.data.status_code == 200) {
                        stashrToast('Plugin Uploaded', 'success')
                    } else {
                        stashrToast(res.data.message, 'error')
                    }
                })
        },
        togglePlugin() {
            if(this.plugin.plugin_state == 'disabled') {
                console.log('Enabling')
                axios.post('{{ url_for('api.api_post_plugin_enable', plugin='PLUGINID') }}'.replace('PLUGINID', this.plugin.plugin_name))
                    .then(res=>{
                        if(res.data.status_code == 200) {
                            this.plugin.plugin_state='enabled'
                            stashrToast('Plugin Enabled', 'success')
                        }
                    })
            } else {
                console.log('Disabling')
                axios.post('{{ url_for('api.api_post_plugin_disable', plugin='PLUGINID') }}'.replace('PLUGINID', this.plugin.plugin_name))
                    .then(res=>{
                        if(res.data.status_code == 200) {
                            this.plugin.plugin_state='disabled'
                            stashrToast('Plugin Disabled', 'success')
                        }
                    })
            }
        },
        deletePlugin() {
            axios.post('{{ url_for('api.api_post_plugin_remove', plugin='PLUGINID') }}'.replace('PLUGINID', this.plugin.plugin_package_name))
                .then(res=>{
                    if(res.data.status_code == 200) {
                        stashrToast('Plugin Deleted', 'success')
                    }
                })
        },
    },
    delimiters: ["[[","]]"]
})

Vue.component('plugin',{
    props:['plugin'],
    template: `
    <li @click="changePlugin" role="button" class='col-12 col-md-3 m-1 p-1 border rounded text-center text-light' v-bind:class="pluginStatusBG" data-bs-toggle="modal" data-bs-target="#modalPlugin">
        <strong>[[ plugin.plugin_name ]]</strong><br />
        [[ plugin.plugin_version ]]<br />
        [[ plugin.plugin_author ]]
    </li>
    `,
    computed: {
        pluginStatusBG() {
            let classname = 'bg-danger';
            if(this.plugin.plugin_state == 'enabled') {
                classname = 'bg-success'
            }
            return classname;
        },
    },
    methods: {
        changePlugin() {
            app.changePlugin(this.plugin)
        }
    },
    delimiters: ["[[","]]"]
})

Vue.component('plugins',{
    props: ['plugins'],
    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">
                <div class="col-sm-12 col-md-6 text-center text-md-start text-white ">
                    <h2>Plugins</h2>
                </div>
                <div class="col-sm-12 col-md-6 text-center text-md-end">
                    <button type="button" class="btn btn-warning" @click="restartServer">Restart Server</button>
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#modalUpload">Install Plugin</button>
                </div>
            </div>
        </div>
        <div class="d-grid w-100 m-0 p-0">
            <div class="row w-100 m-0 p-3">
                <ul class="d-flex flex-wrap w-100 m-0 p-0 justify-content-center">
                    <plugin
                        v-for="plugin in plugins"
                        v-bind:plugin="plugin"
                        v-bind:key="plugin.plugin_name"
                    ></plugin>
                </ul>
            </div>
        </div>
    </div>
    `,
    methods: {
        restartServer() {
            app.restartServer()
        }
    },
    delimiters: ["[[","]]"]
})

var app = new Vue({
    el: '#app',
    data: {
        plugins: [],
        plugin: []
    },
    created() {
        this.getPlugins()
    },
    methods: {
        getPlugins() {
            axios.get('{{ url_for('api.api_get_plugins') }}')
            .then(res => {
                this.plugins = res.data.results
                this.plugin = this.plugins[0]
            })
        },
        changePlugin(plugin) {
            this.plugin = plugin
        },
        restartServer() {
            axios.post('{{ url_for('api.restart_server') }}')
                .then(res=>{
                    if(res.data.status_code == 200) {
                        stashrToast('Restarting Server', 'success')
                    }
                })
                .catch()
        },
    },
    delimiters: ["[[","]]"]
})

{% endblock %}