<script setup>
import { computed } from 'vue';
import { RouterLink, useRoute } from 'vue-router';

import useLeftSidebar from '@Stores/LeftSidebar';
import GoogleIcon     from '@Shared/GoogleIcon.vue';

/** Definidores */
const leftSidebar = useLeftSidebar();
const vroute      = useRoute();

/** Propiedades */
const props = defineProps({
    icon: String,
    name: String,
    to: String,
    active: {
        type: Boolean,
        default: false
    }
});

const classes = computed(() => {
    let isActive = props.active || props.to === vroute.name;
    
    if (isActive) {
        return 'flex items-center px-4 py-3 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent';
    } else {
        return 'flex items-center px-4 py-3 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200';
    }
});

const iconClasses = computed(() => {
    let isActive = props.active || props.to === vroute.name;
    return isActive ? 'text-white' : 'text-gray-500';
});

const closeSidebar = () => {
    if(TwScreen.isDevice('phone') || TwScreen.isDevice('tablet')) {
        leftSidebar.close();
    }
};
</script>

<template>
    <li @click="closeSidebar()">
        <RouterLink
            :class="classes"
            :to="$view({name:to})"
        >
            <span
                v-if="icon"
                class="inline-flex justify-center items-center mr-3"
            >
                <GoogleIcon 
                    class="text-xl"
                    :class="iconClasses"
                    :name="icon"
                    outline
                />
            </span>
            <span 
                v-if="name"
                class="text-sm font-medium"
            >
                {{ name }}
            </span>
            <slot />
        </RouterLink>
    </li>
</template>
