<template>
  <div class="welcome-screen tw:p-5">
    <component :is="currentComponent" />
    <v-row>
      <v-col cols="12">
        <h2 class="tw:text-2xl tw:font-semibold tw:mb-4">
          {{ $t("core.welcomeScreen.builtInFeaturesTitle") }}
        </h2>
        <v-expansion-panels flat variant="accordion">
          <v-expansion-panel v-for="feature in features" :key="feature.key">
            <v-expansion-panel-title>
              <v-icon :icon="feature.icon" class="tw:mr-3"></v-icon>
              {{ $t(`core.welcomeScreen.${feature.key}Title`) }}
            </v-expansion-panel-title>
            <v-expansion-panel-text>
              <div class="tw:py-2">
                {{ $t(`core.welcomeScreen.${feature.key}Description`) }}
              </div>
              <template v-if="feature.status">
                <a
                  v-if="feature.status.link"
                  target="_blank"
                  :href="feature.status.link"
                >
                  <v-chip
                    v-if="feature.status"
                    :color="feature.status.color"
                    size="small"
                    class="tw:mt-2"
                  >
                    <v-icon start :icon="feature.status.icon"></v-icon>
                    {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
                  </v-chip>
                </a>
                <v-chip
                  v-else
                  :color="feature.status.color"
                  size="small"
                  class="tw:mt-2"
                >
                  <v-icon start :icon="feature.status.icon"></v-icon>
                  {{ $t(`core.welcomeScreen.${feature.status.key}`) }}
                </v-chip>
              </template>
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-col>
    </v-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue"
import type { ServerState } from "@racletteCore/store/types"
import UserWelcome from "./components/welcomeScreen/UserWelcomeScreen.vue"
import AdminWelcome from "./components/welcomeScreen/AdminWelcomeScreen.vue"
import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"

const { state: backend } = useStateSubscriber<ServerState>("backend")

const { state: user } = useStateSubscriber("user")

// Built-in features
const features = computed(() => {
  const list = [
    {
      key: "userMenu",
      icon: "mdi-menu",
      status: null,
    },
    {
      key: "localization",
      icon: "mdi-translate",
      status: null,
    },
    {
      key: "theming",
      icon: "mdi-palette",
      status: null,
    },
  ]
  if (backend.value.socket.status) {
    list.push({
      key: "notifications",
      icon: "mdi-bell",
      status: {
        key: "connected",
        icon: "mdi-wifi",
        color: "success",
      },
    })
  } else {
    list.push({
      key: "notifications",
      icon: "mdi-bell",
      status: {
        key: "disconnected",
        icon: "mdi-wifi",
        color: "error",
      },
    })
  }
  list.push({
    key: "more_soon",
    icon: "mdi-party-popper",
    status: {
      key: "roadmap",
      icon: "mdi-chart-timeline",
      color: "info",
      link: "https://gitlab.com/groups/raclettejs/-/roadmap?state=all&sort=START_DATE_ASC&layout=QUARTERS&timeframe_range_type=THREE_YEARS&progress=WEIGHT&show_progress=true&show_milestones=true&milestones_type=ALL&show_labels=true",
    },
  })
  return list
})

const currentComponent = computed(() => {
  return user.value.isAdmin ? AdminWelcome : UserWelcome
})
</script>
