<template>
  <div class="bg-gray-900 h-[100dvh] overflow-hidden text-white">
    <div :class="$style.noise"/>
    <div :class="$style.vignette"/>
    <div class="h-full relative flex flex-col">
      <nav class="mx-auto p-4 flex gap-4 overflow-x-auto max-w-full">
        <div class="flex-shrink-0 flex items-center rounded-lg bg-dark-400 overflow-hidden">
          <button
              v-for="tab in screens"
              :key="tab.id"
              class="px-4 py-2 bg-gray-700"
              :class="activeScreenId !== tab.id && 'bg-opacity-0'"
              @click="activeScreenId = tab.id"
          >
            {{ tab.label }}
          </button>
        </div>
        <button v-if="!isFullscreen" class="px-3 rounded-lg bg-dark-400 flex items-center justify-center" @click="enterFullscreen()">
          <CornersOutIcon/>
        </button>
      </nav>
      <main class="flex-grow">
        <transition name="fade" mode="out-in">
          <component :is="screens.find(t => t.id === activeScreenId)!.component" @switch-screen="(id: string) => (activeScreenId = id)"/>
        </transition>
      </main>
    </div>
    <div class="flex flex-col justify-center items-center text-lg inset-0 absolute bg-dark-900 transition" :class="!isLoading && 'opacity-0 pointer-events-none'">
      <span class="text-center">Verbindung wird hergestellt…</span>
    </div>
  </div>
</template>

<style module lang="scss">
  html, body {
    user-select: none;
    height: 100%;
  }

  .noise, .vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .noise {
    background: url("./assets/noise.png") repeat;
    opacity: 10%;
  }

  .vignette {
    background: radial-gradient(rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 20%));
  }
</style>

<style>
  *, *::before, *:after {
    box-sizing: border-box;
  }

  button {
    border: none;
    color: inherit;
  }

  html, body, #app {
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    user-select: none;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 200ms ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .list-move,
  .list-enter-active,
  .list-leave-active {
    transition: 400ms ease;
    transition-property: opacity, transform;
  }

  .list-enter-from,
  .list-leave-to {
    opacity: 0;
    transform: scale(0.9);
  }

  .list-leave-active {
    position: absolute;
  }
</style>

<script setup lang="ts">
  import { type Component, computed, ref, watchEffect } from "vue"
  import { trpcClient } from "./trpc"
  import { useGame } from "./game"
  import InteractionsScreen from "./screens/InteractionsScreen.vue"
  import QueueScreen from "./screens/QueueScreen.vue"
  import CornersOutIcon from "virtual:icons/ph/corners-out-bold"
  import { useBrowserLocation, useFullscreen } from "@vueuse/core"
  import DirectorScreen from "./screens/DirectorScreen.vue"

  const isLoading = ref(true)
  const activeScreenId = ref<string>("interactions")

  const game = useGame()
  const { isFullscreen, enter: enterFullscreen } = useFullscreen()
  const location = useBrowserLocation()

  const isDirector = computed(() => location.value.hash === "#director")

  watchEffect(() => {
    if (isDirector.value) activeScreenId.value = "director"
    else activeScreenId.value = "interactions"
  })

  interface Screen {
    id: string
    label: string
    component: Component
  }

  const screens = computed(() => {
    const result: Screen[] = [
      {
        id: "interactions",
        label: "Interagieren",
        component: InteractionsScreen
      },
      {
        id: "queue",
        label: "Abstimmen",
        component: QueueScreen
      }
    ]

    if (isDirector.value) result.push({
      id: "director",
      label: "Regie",
      component: DirectorScreen
    })

    return result
  })

  trpcClient.join.subscribe(undefined, {
    onStarted: () => {
      isLoading.value = false
    },
    onData: game.handleGameEvent,
    onError: error => {
      console.error("🔴", error)
    },
    onStopped() {
        window.location.reload()
    },
  })
</script>
