<script setup>
import { ref, 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({
  name: String,
  icon: String,
  to: String,
  active: {
    type: Boolean,
    default: false,
  },
  collapsed: {
    type: Boolean,
    default: false,
  },
});

const isCollapsed = ref(props.collapsed);

const closeSidebar = () => {
  if (TwScreen.isDevice("phone") || TwScreen.isDevice("tablet")) {
    leftSidebar.close();
  }
};

const isActive = computed(() => props.active || props.to === vroute.name);

const classes = computed(() => {
  return isActive.value
    ? "flex items-center px-4 py-2 mx-2 my-1 text-white !bg-blue-600 rounded-lg transition-all duration-200 !border-transparent"
    : "flex items-center px-4 py-2 mx-2 my-1 text-gray-600 hover:bg-gray-100 rounded-lg transition-all duration-200";
});
</script>

<template>
  <ul>
    <li class="hidden md:block">
      <div class="flex items-center px-2 py-2 rounded">
        <button
          class="dropdown-toggle w-full"
          @click.stop="isCollapsed = !isCollapsed"
        >
          <RouterLink
            :to="$view({ name: props.to })"
            :class="classes"
            class="flex items-center justify-between flex-1"
            @click="closeSidebar"
          >
            <div class="flex items-center">
              <GoogleIcon v-if="icon" :name="icon" class="text-xl mr-2" />
              <span class="text-sm font-medium">{{ name }}</span>
            </div>

            <GoogleIcon
              :name="isCollapsed ? 'expand_more' : 'expand_less'"
              class="text-gray-400 text-lg"
            />
          </RouterLink>
        </button>
      </div>
    </li>
    <div
      class="transition-all duration-300 ease-in-out overflow-hidden"
      :class="{ 'max-h-0': isCollapsed, 'max-h-96': !isCollapsed }"
    >
      <slot />
    </div>
  </ul>
</template>
