<script>
import { defineComponent } from 'vue'
import {useRouter} from 'vue-router'
import Cookies from 'js-cookie'
import { config } from '@/main';

// icon imports
import Search from '@/components/icons/Search.vue'
import Home from '@/components/icons/Home.vue'
import Person from '@/components/icons/Person.vue'
import Wrong2 from '@/components/icons/Wrong2.vue'

export default defineComponent({
    name: 'MobileSidebar',
    setup () {
        const router = useRouter();
        return {router};
    },
    methods: {
        signedIn () {
            return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
        },
        logOut () {
            Cookies.remove("token");
            window.location.reload();
        }
    },
    data() {
        return {
            size: 40,
            config
        }
    },
    components: {Search, Home, Person, Wrong2}
})
</script>

<template>
    <div class="sidebar-container">
        <ul class="mobile-sidebar">
            <li>
                <button @click="this.router.push('/')">
                    <Home :size="size" />
                    home
                </button>
            </li>

            <li>
                <button @click="this.router.push('/search')">
                    <Search :size="size" />
                    search
                </button>
            </li>

            <li>
                <button>
                    <Person :size="size" />
                    friends
                </button>
            </li>

            <li>
                <button v-if="signedIn()" @click="this.router.push('/profile/myself')">
                    <img :src="`${config.serverURL}/account/myself/picture`" :width="size" :height="size" alt="profile picture"/>
                    hajeeber
                </button>
                <button v-else @click="this.router.push('/login')">
                    <img :src="`${config.serverURL}/account/getPremiumProfilePicture/18`" :width="size" :height="size" alt="profile picture" />
                    hajeeber
                </button>
            </li>

            <li v-if="signedIn()">
                <button @click="logOut()">
                    <Wrong2 :size="size" />
                    log out
                </button>
            </li>
        </ul>
    </div>
</template>

<style scoped>
.sidebar-container {
    height: 100px;
    width: 100vw;
    margin: 0;

    flex: 1 1 0;

    display: flex;
    align-items: flex-end;

    pointer-events: none;
    position: fixed;
    left: 0;
    bottom: 0;
}

li {
    text-decoration: none;
    list-style: none;
}

.mobile-sidebar {
    margin: 0;
    pointer-events: all;
    width: 100vw;
    height: 100px;
    padding: 0;
    justify-content: space-between;

    background-color: var(--secondary-background-color);
    color: var(--text-color);

    display: flex;
    flex-direction: row;
    gap: 10px;

    z-index: 3;
}


.mobile-sidebar li button {
    display: flex;
    flex-direction: column;
    align-items: center;

    border: none;

    padding: 10px 10px;
    background: none;
    color: var(--accent-color);
    font-family: "Knewave", cursive;
    font-size: 20px;
}

.mobile-sidebar li button:hover {
    color: var(--inverted-text-color);
    cursor: pointer;
}
</style>
