<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useUploadsStore } from '../stores/upload'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
import { color } from '~/composables/color'

import Logo from '~/components/Logo.vue'
import Input from '~/components/ui/Input.vue'
import Link from '~/components/ui/Link.vue'
import ActorAvatar from '~/components/common/ActorAvatar.vue'
import UserMenu from './UserMenu.vue'
import Button from '~/components/ui/Button.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import { useRoute } from 'vue-router'

const isCollapsed = ref(true)

const route = useRoute()
watch(() => route.path, () => ( isCollapsed.value = true ))

const searchQuery = ref('')

// Hide the fake app when the real one is loaded
onMounted(() => {
  document.getElementById('fake-app')?.remove()
})

const { t } = useI18n()

const store = useStore()
const uploads = useUploadsStore()
const logoUrl = computed(() => store.state.auth.authenticated ? 'library.index' : 'index')
</script>

<template>
  <Layout aside default solid gap-12 :class="[$style.sidebar, $style['sticky-content']]">
    <Layout header flex no-gap style="justify-content:space-between; padding-right:8px;">
      <Link
        :to="{name: logoUrl}"
        :class="$style['logo']"
      >
        <i>
          <Logo />
          <span class="visually-hidden">{{ t('components.Sidebar.link.home') }}</span>
        </i>
      </Link>

      <Layout nav no-gap flex style="align-items: center;">
        <Link to="/manage/settings"
          round
          icon="bi-wrench"
          ghost
        >
        </Link>

        <Button
          align-self="center"
          round
          icon="bi-upload"
          icon-width
          :class="[$style.button]"
          ghost
          @click="store.commit('ui/toggleModal', 'upload')"
          :aria-pressed="store.state.ui.modalsOpen.has('languages') || undefined"
        >
          <Transition>
            <div
              v-if="uploads.currentIndex < uploads.queue.length"
              :class="$style['upload-progress']"
            >
              <div :class="[$style.progress, $style.fake]" />
              <div
                :class="$style.progress"
                :style="{ maxWidth: `${uploads.progress}%` }"
              />
            </div>
          </Transition>
        </Button>

        <UserMenu/>

        <Button round ghost icon="bi-list large" align-self="center" class="hide-on-desktop" @click="isCollapsed=!isCollapsed"/>
      </Layout>
    </Layout>
    <Layout no-gap stack :class="[$style['menu-links'], isCollapsed && 'hide-on-mobile']">
      <div :class="$style.search">
        <Input
          v-model="searchQuery"
          raised
          type="search"
          icon="bi-search"
          :placeholder="t('components.audio.SearchBar.placeholder.search')"
        />
      </div>

<!-- Sign up, Log in -->
      <div style="display:contents;" v-if="!store.state.auth.authenticated">
        <Layout flex grow style="--gap:16px;">
          <Link :to="{ name: 'login' }"
            solid
            icon="bi-box-arrow-in-right"
            style="flex-grow:1"
            class="active"
          >
            {{ t('components.common.UserMenu.link.login') }}
          </Link>
          <Link :to="{ name: 'signup' }"
            default solid
            icon="bi-person-square"
            style="flex-grow:1"
          >
            {{ t('components.common.UserMenu.link.signup') }}
          </Link>
        </Layout>
        <Spacer :size="32" />
      </div>

      <nav style="display:contents;">
      <Link to="/library"
          ghost
          icon="bi-compass"
          thickWhenActive
        >
          {{ t('components.Sidebar.header.explore') }}
      </Link>

      <Link to="/library/artists"
          ghost
          icon="bi-person"
          thickWhenActive
        >
          {{ t('components.Sidebar.link.artists') }}
      </Link>

      <Link to="/library/albums"
          ghost
          icon="bi-disc"
          thickWhenActive
        >
          {{ t('components.Sidebar.link.albums') }}
      </Link>

      <Link to="/library/playlists"
          ghost
          icon="bi-music-note-list"
          thickWhenActive
        >
          {{ t('components.Sidebar.link.playlists') }}
      </Link>
      <Link to="/library/radios"
          ghost
          icon="bi-boombox-fill"
          thickWhenActive
        >
          {{ t('components.Sidebar.link.radios') }}
      </Link>
      <Link to="/library/podcasts"
          ghost
          icon="bi-mic"
          thickWhenActive
        >
          {{ t('components.Sidebar.link.podcasts') }}
      </Link>
      <Link to="/favorites"
          ghost
          icon="bi-heart"
          thickWhenActive
        >
          {{ t('components.Sidebar.link.favorites') }}
      </Link>
    </nav>
    <Spacer />
    <h3>{{ t('components.Sidebar.link.channels') }}</h3>
    <Spacer grow />
    <Layout nav flex no-gap style="justify-content: center">
      <Link thin to="/about">
        {{ t('components.Sidebar.link.about') }}
      </Link>
      <Spacer shrink />
      <Link thin to="/privacy">
        Privacy
      </Link>
      <Spacer shrink />
      <Link thin to="/legal">
        Legal
      </Link>
    </Layout>
    </Layout>
  </Layout>
</template>

<style module lang="scss">
.sidebar {
  @include dark-theme {
    background-color: var(--fw-gray-950);
    /* TODO: Fix */
  }
  .logo {
    display: block;
    width: 40px;
    height: 40px;
    margin: 16px;
  }

  header {
    & > nav {
      a,
      button.button {
        height: 40px;
        width: 40px;
        padding: 10px;
      }
    }
  }

  &.sticky-content {
    max-height: 100dvh;
    overflow: auto;
    top: 0;

    .upload-progress {
      background: var(--fw-blue-500);
      position: absolute;
      left: 0;
      bottom: 2px;
      width: 100%;
      padding: 2px;

      &.v-enter-active,
      &.v-leave-active {
        transition: transform 0.2s ease, opacity 0.2s ease;
      }

      &.v-leave-to,
      &.v-enter-from {
        transform: translateY(0.5rem);
        opacity: 0;
      }

      > .progress {
        height: 0.25rem;
        width: 100%;
        transition: max-width 0.1s ease;
        background: var(--fw-gray-100);
        border-radius: 100vh;
        position: relative;

        &.fake {
          background: var(--fw-blue-700);
        }

        &:not(.fake) {
          position: absolute;
          inset: 2px;
        }
      }
    }

    .avatar {
      aspect-ratio: 1;
      background: var(--fw-beige-100);
      border-radius: 100%;

      text-decoration: none !important;
      color: var(--fw-gray-700);

      > img,
      > i {
        width: 100%;
        height: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 !important;
        border-radius: 100vh;
      }
    }

    .search {
      padding: 0 4px;
      margin-bottom: 40px;

      input {
        height: 50px;

        &:focus {
          border-color: var(--fw-gray-100);
        }

      }
    }

    > h3 {
      margin: 0;
      padding: 0 32px 8px;
      font-size: 14px;
      line-height: 1.2;
    }
    .menu-links {
      padding: 0 16px 32px;
      flex-grow: 1;

      nav > a {
        padding-left: 20px;

        &:global(.active) {
          border: none;
        }

      }

    }
  }

  :global(.hide-on-mobile) {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    height: 100%;

    :global(.hide-on-desktop) {
      display: none !important;
    }

    :global(.hide-on-mobile) {
      display: inherit;
    }

    &.sticky-content {
      position: sticky;
      height: 100%;
    }
  }
}
</style>
