<!--
@license GNU AGPL version 3 or any later version

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
    <div id="side-menu" class="side-menu-big">
        <div class="side-menu-header">
            <button class="side-menu-opener side-menu-closer"></button>

            <div class="side-menu-settings" v-if="settings">
                <a v-bind:href="settings.href">
                    {{ settings.name }}

                    <span class="avatardiv avatardiv-shown">
                        <img v-bind:src="settings.avatar" v-bind:alt="settings.name" v-bind:title="settings.name">
                    </span>
                </a>
            </div>

            <button class="side-menu-opener"></button>
        </div>

        <div class="side-menu-categories-wrapper">
            <div class="side-menu-categories">
                <div v-if="!items.length" class="side-menu-loader">
                    <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
                        <g fill="none" fill-rule="evenodd">
                            <g transform="translate(1 1)" stroke-width="2">
                                <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
                                <path d="M36 18c0-9.94-8.06-18-18-18">
                                    <animateTransform
                                        attributeName="transform"
                                        type="rotate"
                                        from="0 18 18"
                                        to="360 18 18"
                                        dur="1s"
                                        repeatCount="indefinite"/>
                                </path>
                            </g>
                        </g>
                    </svg>
                </div>

                <div class="side-menu-category" v-for="category in items">
                    <h2 class="side-menu-category-title" v-if="category.name != ''" v-html="category.name"></h2>

                    <ul class="side-menu-apps-list">
                        <li v-bind:class="{'side-menu-app': true, 'active': activeApp === appId}" v-for="(app, appId) in category.apps">
                            <a v-bind:href="app.href" :target="targetBlankApps.indexOf(appId) !== -1 ? '_blank' : undefined" v-bind:title="app.name">
                                 <img class="side-menu-app-icon" v-bind:src="app.icon"></span>
                                 <span class="side-menu-app-text" v-html="app.name"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import trim from 'trim'
import axios from 'axios'

export default {
    name: 'SideMenuBig',
    data() {
        return {
            items: [],
            activeApp: null,
            targetBlank: false,
            targetBlankApps: [],
            settings: null,
        }
    },
    methods: {
        retrieveApps() {
            this.apps = []
            let that = this

            axios
                .get(OC.generateUrl('/apps/side_menu/nav/items'))
                .then(function(response) {
                    that.items = response.data.items

                    let apps = []

                    for (let category of that.items) {
                        for (let a in category.apps) {
                            apps.push(category.apps[a])
                        }
                    }

                    jQuery('body').trigger('side-menu.apps', [apps])
                });
        },

        retrieveActiveApp() {
            let activeAppLink = document.querySelector('#appmenu a.active')
            this.activeApp = activeAppLink ? activeAppLink.parentNode.getAttribute('data-id') : null
        },

        retrieveConfig() {
            let that = this

            axios
                .get(OC.generateUrl('/apps/side_menu/js/config'))
                .then(function(response) {
                    const config = response.data

                    that.targetBlankApps = config['target-blank-apps']
                    that.settings = config['settings']
                });
        },
    },
    mounted() {
        this.retrieveConfig()
        this.retrieveApps()
        this.retrieveActiveApp()
    }
}
</script>
