<template>
  <div
    :class='[
      "large:flex!", "flex-col", "max-large:rounded-r-lg",
      "max-large:hidden", "max-large:fixed", "max-large:z-9996",
      "bg-(--bg-color)", "shrink-0", "items-center", "justify-center",
      "max-large:px-4", "left-0", "right-auto",
      "max-w-40", "max-large:max-w-55", "w-fit", "h-screen", "gap-3",
    ]'
    id="menu"
  >
    <RouterLink
      class="flex flex-col items-center gap-1 mb-2"
      to="/about/server"
      v-if="authState.isSignedIn"
    >
      <img
        class="w-30 h-20 block rounded-lg object-cover"
        :src="servericon()"
      />

      <span class="text-(--text-color)/85">
        {{ authState.hostname }}
      </span>
    </RouterLink>    

    <RouterLink
      :class='[
        "flex", "px-4", "py-2", "transition--all", "w-full",
        "rounded-[50px]", "cursor-pointer", "lg-menu-content",
      ]'
      v-for="content of contents"
      :to="content.link"
    >
      <Icon
        :icon="content.icon"
        class="shrink-0 mr-1 my-auto w-6 h-6"
      />
      
      <span
        class="shrink-0 text-xl font-bold"
      >
        {{ content.title }}
      </span>
    </RouterLink>

    <RouterLink
      class="flex left-5 bottom-15 gap-2 lg-menu-account"
      :to="`/@${authState.me.userid}`"
      v-if="authState.isSignedIn"
    >
      <img
        class="w-12 h-12 object-cover rounded-full"
        :src="authState.me.user_icon"
      />
      
      <div class="flex flex-col">
        <div class="flex gap-1">
          <span class="font-bold">
            {{ authState.me.username }}
          </span>
          <Icon
            icon="material-symbols:robot-2-rounded"
            class="w-4 h-4 shrink-0 m-auto opacity-70"
            v-if="authState.me.isBot"
          />
          <Icon
            icon="material-symbols:admin-panel-settings-rounded"
            class="w-4 h-4 shrink-0 m-auto text-(--accent)"
            v-if="authState.me.isAdmin"
          />
        </div>
        <span class="text-(--text-color)/85">
          @{{ authState.me.userid }}
        </span>
      </div>
    </RouterLink>
  </div>
</template>

<style scoped>
.router-link-active.lg-menu-content,
.lg-menu-content:hover {
  background-color: var(--accent);
  color: var(--accent-in-text);
}
</style>

<script lang="ts" setup>
import { authState } from "@/lib/account";
import { Icon } from "@iconify/vue";
import { RouterLink } from "vue-router";

const servericon = () => {
  if (authState.isSignedIn) {
    if (authState.serverinfo.server_info.server_icon) {
      return authState.serverinfo.server_info.server_icon;
    } else {
      return `${authState.origin}/img/uwuzucolorlogo.svg`;
    }
  } else {
    return "/error_image.svg";
  }
}

const contents = [
  {
    title: "ホーム",
    icon: "material-symbols:home-rounded",
    link: "/",
  },
  {
    title: "検索",
    icon: "material-symbols:search-rounded",
    link: "/search",
  },
  {
    title: "通知",
    icon: "material-symbols:notifications-rounded",
    link: "/notifications",
  },
  {
    title: "ブックマーク",
    icon: "material-symbols:bookmark-rounded",
    link: "/bookmarks",
  },
  {
    title: "設定",
    icon: "material-symbols:settings-rounded",
    link: "/settings",
  },
];
</script>
