<template>
  <div
    class="side-container"
    :class="sideTheme"
    :style="{
      '--aside-width': `${sidebarWidth}px`,
      borderRight: showSidebar ? '1px solid var(--el-border-color)' : 'none'
    }"
  >
    <logo :collapse="isCollapsed" />
    <div class="side-menu flex-1 min-h-0">
      <el-scrollbar>
        <el-menu
          ref="menuRef"
          :class="'menu-' + sideTheme"
          v-bind="themeMenuConfig"
          :default-active="activeMenu"
          :collapse="isCollapsed"
          mode="vertical"
          @select="handleSelect"
        >
          <menu-item v-for="route in routes" :key="route.path" :route="route" :route-path="route.path" />
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useConfigStore } from '@/stores/modules/config'
import { useSettingStore } from '@/stores/modules/setting'
import { useUserStore } from '@/stores/modules/user'
import { isExternal } from '@/utils/util'
import Logo from './Logo.vue'
import MenuItem from './MenuItem.vue'

const menuRef = ref()
const configStore = useConfigStore()
const settingStore = useSettingStore()
const userStore = useUserStore()
const route = useRoute()

const sideTheme = computed(() => settingStore.sideTheme)
const sidebarWidth = computed(() => settingStore.sidebarWidth)
const showSidebar = computed(() => settingStore.showSidebar)
const isCollapsed = computed(() => {
  if (settingStore.showSidebar && configStore.windowSizeLevel !== 1) {
    return configStore.sideCollapsed
  } else {
    return false
  }
})
const themeMenuConfig = computed(() => ({
  backgroundColor: sideTheme.value == 'dark' ? 'var(--el-bg-color-dark)' : '',
  textColor: sideTheme.value == 'dark' ? 'var(--el-color-white)' : '',
  activeTextColor: sideTheme.value == 'dark' ? 'var(--el-color-white)' : ''
}))

const routes = computed(() => userStore.routes)
const activeMenu = computed<string>(() => {
  if (route.meta?.activeMenu) {
    return route.meta?.activeMenu as string
  }
  return route.path
})

const handleSelect = (index: string) => {
  if (isExternal(index)) menuRef.value?.updateActiveIndex(activeMenu.value)
  if (!settingStore.showSidebar || configStore.windowSizeLevel === 1) {
    configStore.toggleDrawerShow(false)
  }
}
</script>

<style lang="scss" scoped>
.side-container {
  @apply h-full flex flex-col;
  position: relative;
  z-index: 999;
  background-color: var(--el-bg-color);

  .side-logo {
    @apply flex items-center overflow-hidden gap-2 cursor-pointer p-2;

    .logo-image {
      @apply w-8 h-8 flex-shrink-0;
    }

    .logo-title {
      @apply text-base truncate text-nowrap font-semibold;
    }
  }

  .side-menu {
    padding: 8px 8px 0;

    :deep(.el-menu) {
      border-right: none;

      .el-menu-item,
      .el-sub-menu__title {
        @apply border-none rounded-lg mb-1;

        .el-icon {
          @apply transition-transform duration-300;
        }

        &:not(.is-active):hover .el-icon {
          transform: scale(1.2);
        }

        span {
          @apply truncate text-nowrap;
        }
      }

      &.el-menu--collapse {
        .el-sub-menu.is-active .el-sub-menu__title {
          background-color: var(--menu-active-bg-color);
          color: var(--menu-active-text-color);

          .el-icon {
            transform: scale(1);
          }
        }
      }

      &:not(.el-menu--collapse) {
        width: calc(var(--aside-width) - 16px);
      }

      &.el-menu--collapse {
        .el-menu-tooltip__trigger {
          padding: 0 var(--el-menu-base-level-padding);
        }
      }

      &.menu-light {
        .el-menu-item:hover,
        .el-sub-menu__title:hover {
          color: var(--el-color-primary);
          background-color: var(--menu-hover-bg-color);
          color: var(--menu-hover-text-color);
        }

        .el-menu-item.is-active {
          background-color: var(--menu-active-bg-color);
          color: var(--menu-active-text-color);
        }
      }

      &.menu-dark {
        .el-menu-item:hover,
        .el-sub-menu__title:hover {
          background-color: hsl(0, 0%, 28%);
        }

        .el-menu-item.is-active {
          @apply bg-primary;
        }

        &.el-menu--collapse {
          .el-sub-menu.is-active .el-sub-menu__title {
            @apply bg-primary text-white;
          }
        }
      }
    }
  }

  &.dark {
    background-color: var(--el-bg-color-dark);
  }
}
</style>
