<script setup>
import { onMounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import LeftMenu from 'components/LeftMenu.vue';
import { useStateStore } from 'stores/useStateStore';
import { useNavigationStore } from 'src/stores/useNavigationStore';

const stateStore = useStateStore();
const navigation = useNavigationStore();
const { t } = useI18n();

onMounted(() => navigation.fetchPinned());

const pinnedModules = computed(() => navigation.getPinnedModules());
</script>

<template>
    <QDrawer
        v-model="stateStore.leftDrawer"
        show-if-above
        :width="256"
        :breakpoint="1000"
    >
        <QScrollArea class="fit">
            <LeftMenu />
        </QScrollArea>
    </QDrawer>
    <QPageContainer>
        <QPage class="q-pa-md">
            <div class="row items-start wrap q-col-gutter-md q-mb-lg">
                <div class="col-12 col-md">
                    <div class="text-h6 text-grey-8 q-mb-sm">
                        {{ t('globals.pinnedModules') }}
                    </div>
                    <QCard class="row flex-container q-pa-md">
                        <div class="text-grey-5" v-if="pinnedModules.length === 0">
                            {{ t('pinnedInfo') }}
                        </div>
                        <template v-if="pinnedModules.length">
                            <div
                                v-for="item of pinnedModules"
                                :key="item.title"
                                class="row no-wrap q-pa-xs flex-item"
                            >
                                <QBtn
                                    align="evenly"
                                    padding="16px"
                                    flat
                                    stack
                                    size="lg"
                                    :icon="item.icon"
                                    color="orange-6"
                                    class="col-4 button"
                                    :to="{ name: item.name }"
                                >
                                    <div class="text-center text-primary button-text">
                                        {{ t(item.title) }}
                                        <div v-if="item.keyBinding">
                                            {{ '(' + item.keyBinding + ')' }}
                                            <QTooltip>
                                                {{
                                                    'Ctrl + Alt + ' +
                                                    item?.keyBinding?.toUpperCase()
                                                }}
                                            </QTooltip>
                                        </div>
                                    </div>
                                </QBtn>
                            </div>
                        </template>
                    </QCard>
                </div>
            </div>
        </QPage>
    </QPageContainer>
</template>

<style lang="scss" scoped>
.left-menu {
    color: var(--vn-font-color);
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 300px;
    overflow: auto;
}
.flex-item {
    width: 100px;
}
.button {
    width: 100%;
    line-height: normal;
    align-items: center;
}
.button-text {
    font-size: 10px;
    margin-top: 5px;
}
</style>

<i18n>
{
    "en": {
        "pinnedInfo": "Your pinned modules will be shown here..."
    },
    "es": {
        "pinnedInfo": "Tus módulos fijados aparecerán aquí..."
    }
}
</i18n>
