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

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

export default defineComponent({
    name: 'DesktopSidebar',
    setup() {
        const router = useRouter()
        return { router }
    },
    methods: {
        signedIn() {
            return Cookies.get('token') && Cookies.get('token').startsWith('HajeebToken')
        },
        logOut() {
            Cookies.remove('token')
            window.location.reload()
        },
        search() {
            if (this.minimized) return this.router.push('/search')

            const searchQuery = document.getElementById('search-query')
            if (searchQuery.value.trim() === '') return this.router.push('/search')
            return this.router.push({
                name: 'search',
                query: { searchQuery: searchQuery.value },
            });
        },
    },
    data() {
        return {
            config,
            size: 40,
        }
    },
    props: {
        minimized: {
            type: Boolean,
            required: true,
        },
    },
    components: { Search, Home, Compass, Grandpa, Person, Phone, Wrong2 },
})
</script>

<template>
    <div class="sidebar" :style="{ minWidth: minimized ? '150px' : '350px' }">
        <div class="top">
            <img
                :src="minimized ? '/assets/logo.png' : '/assets/banner.png'"
                :style="{ width: minimized ? '100px' : '250px' }"
                alt="logo"
            />
        </div>

        <ul class="middle">
            <div class="searchContainer" :style="{ width: minimized ? '100px' : '250px' }">
                <button class="searchButton" @click="search">
                    <Search :size="size" />
                </button>
                <input
                    v-if="!minimized"
                    type="text"
                    placeholder="Search"
                    class="searchBar"
                    id="search-query"
                />
            </div>

            <li>
                <button @click="this.router.push('/')">
                    <Home :size="size" />
                    <span v-if="!minimized">home</span>
                </button>
            </li>

            <li>
                <button @click="this.router.push('/explore')">
                    <Compass :size="size" />
                    <span v-if="!minimized">explore</span>
                </button>
            </li>

            <li>
                <button>
                    <Grandpa :size="size" />
                    <span v-if="!minimized">following</span>
                </button>
            </li>

            <li>
                <button>
                    <Person :size="size" />
                    <span v-if="!minimized">friends</span>
                </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"
                    />
                    <span v-if="!minimized">my hajeeber</span>
                </button>

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

            <li v-if="signedIn()">
                <button @click="logOut">
                    <Wrong2 :size="size" />
                    <span v-if="!minimized">log out</span>
                </button>
            </li>

            <li>
                <button>
                    <Phone :size="size" />
                    <span v-if="!minimized">contact</span>
                </button>
            </li>
        </ul>

        <div class="bottom">
            <p v-if="!minimized">developer by buttplugstudios.xyz</p>
        </div>
    </div>
</template>

<style scoped>
.sidebar {
    height: 100vh;
    margin: 0;
    padding: 0;

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

    display: flex;
    flex-direction: column;
    justify-content: space-between;
	position: sticky;

    top: 0;
    left: 0;
    z-index: 3;
}

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

.sidebar li button {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 10px;
    background: none;
    color: var(--accent-color);
    font-family: 'Pinyon Script', cursive;
    font-size: 30px;

    border-style: solid;
    border-width: 10px 20px;
    border-image-source: url('/assets/indiaButton.png');
    border-image-slice: 0 80 fill;
    border-image-repeat: stretch;
    border-image-outset: 0;
    border-image-width: 10px 40px;
    border-radius: 40px;
    background-clip: padding-box;
}

.sidebar li button:hover {
    color: black;
    cursor: pointer;
}

.top {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom {
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 'Knewave', system-ui;
    font-size: 20px;
}

.searchButton {
    background-color: transparent;
    border: none;
}

.searchButton:hover {
    cursor: pointer;
    animation-name: interaction;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.searchContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background-color: var(--text-color);
    border-radius: 10px;
}

.searchBar {
    padding: 6px;
    font-size: 20px;
    width: 150px;
    background-color: var(--text-color);
    border: none;
    color: var(--inverted-text-color);
    font-family: 'Knewave', system-ui;
}

.searchBar:focus {
    outline: none;
}
</style>
