<template>
    <v-navigation-drawer
            stateless
            absolute
            value="true"
            v-model="$store.state.sideMenu"
    >
        <v-list>
            <v-list-tile>
                <v-list-tile-action>
                    <v-icon>home</v-icon>
                </v-list-tile-action>
                <v-list-tile-title>Home</v-list-tile-title>
            </v-list-tile>

            <v-list-tile>
                <v-list-tile-action>
                    <v-icon>home</v-icon>
                </v-list-tile-action>
                <v-list-tile-title>Apps</v-list-tile-title>
            </v-list-tile>

            <v-list-group
                    prepend-icon="account_circle"
                    value="true"
            >
                <template v-slot:activator>
                    <v-list-tile>
                        <v-list-tile-title>Admin</v-list-tile-title>
                    </v-list-tile>
                </template>

                <v-list-tile>
                    <v-list-tile-action>
                    </v-list-tile-action>
                    <v-list-tile-title>Settings</v-list-tile-title>
                </v-list-tile>
                <v-list-tile>
                    <v-list-tile-action>
                    </v-list-tile-action>
                    <v-list-tile-title>Users</v-list-tile-title>
                </v-list-tile>
                <v-list-tile>
                    <v-list-tile-action>
                    </v-list-tile-action>
                    <v-list-tile-title>Apps</v-list-tile-title>
                </v-list-tile>
                <v-list-tile>
                    <v-list-tile-action>
                    </v-list-tile-action>
                    <v-list-tile-title>Invites</v-list-tile-title>
                </v-list-tile>


            </v-list-group>

            <v-list-group
                    prepend-icon="account_circle"
                    value="true"
            >
                <template v-slot:activator>
                    <v-list-tile>
                        <v-list-tile-title>Users</v-list-tile-title>
                    </v-list-tile>
                </template>
                <v-list-group
                        no-action
                        sub-group
                        value="true"
                >
                    <template v-slot:activator>
                        <v-list-tile>
                            <v-list-tile-title>Admin</v-list-tile-title>
                        </v-list-tile>
                    </template>

                    <v-list-tile
                            v-for="(admin, i) in admins"
                            :key="i"
                            @click=""
                    >
                        <v-list-tile-title v-text="admin[0]"></v-list-tile-title>
                        <v-list-tile-action>
                            <v-icon v-text="admin[1]"></v-icon>
                        </v-list-tile-action>
                    </v-list-tile>
                </v-list-group>

                <v-list-group
                        sub-group
                        no-action
                >
                    <template v-slot:activator>
                        <v-list-tile>
                            <v-list-tile-title>Actions</v-list-tile-title>
                        </v-list-tile>
                    </template>
                    <v-list-tile
                            v-for="(crud, i) in cruds"
                            :key="i"
                            @click=""
                    >
                        <v-list-tile-title v-text="crud[0]"></v-list-tile-title>
                        <v-list-tile-action>
                            <v-icon v-text="crud[1]"></v-icon>
                        </v-list-tile-action>
                    </v-list-tile>
                </v-list-group>
            </v-list-group>
        </v-list>
    </v-navigation-drawer>
</template>

<script>

    export default {
        name: 'MenuMobile',
        components: {
        },
        data () {
            return {
                big: true,
                bgcolor: "transparent",
                flat: true,
                nameBig: '',
                nameSmall: '',
                sideMenu: this.$store.state.sideMenu,
                menu: [
                    { icon: 'home', title: 'Login' , link: "Login" },
                    { icon: 'info', title: 'Invited' },
                    { icon: 'warning', title: 'Register' }
                ],
                menu2: [
                    { icon: 'home', title: 'Apps' },
                    { icon: 'info', title: 'Admin' },
                    { icon: 'warning', title: 'Account' }
                ],
                menu3: []
            }
        },
        computed: {
            setting: (name) => {
                //this.$store.getters.getSettingValue(this.$store.state, name);
            }
        },
        methods: {
            generateMenu: function () {
                this.menu = [];
                if(!this.$store.state.loggedIn) {
                    this.menu.push({ icon: 'home', title: 'Login' , link: "Login" });
                    if(this.$store.getters.getSettingValue("invites")) {
                        this.menu.push({ icon: 'home', title: 'Invited' , link: "Invited" });
                    }
                    if(this.$store.getters.getSettingValue("registration_possible")) {
                        this.menu.push({ icon: 'home', title: 'Register' , link: "Register" });
                    }
                } else {
                    if(this.$store.getters.getMe.developer) {
                        this.menu.push({ icon: 'home', title: 'Apps' , link: "Apps" });
                    }
                    if(this.$store.getters.getMe.admin) {
                        this.menu.push({ icon: 'home', title: 'Admin' , link: "Admin" });
                    }
                    this.menu.push({ icon: 'home', title: 'Profile' , link: "profile", submenu: true, menu: [
                            { icon: 'home', title: 'Logout' , link: "Logout" }
                        ] });
                }
            },
            handleScroll: function (evt, el) {
                if(evt.pageY > 100) {
                    this.big = false;
                    this.bgcolor = "#fff";
                    this.flat = false;
                } else {
                    this.big = true;
                    this.bgcolor = "transparent";
                    this.flat = true;
                }
            }
        },
        mounted: function () {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            this.generateMenu();
        }
    }
</script>