<script setup>
import {
  PhCaretDoubleLeft,
  PhDotsThreeCircle,
  PhMonitor,
  PhStorefront,
  PhStackPlus,
  PhJoystick,
  PhCrown,
  PhFilmSlate,
  PhArchive,
  PhGitMerge,
  PhCode,
  PhDiscordLogo,
  PhTextAa,
} from "@phosphor-icons/vue";
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import menuNavBar from "@/menuNavBar.js";
import { useMainStore } from "@/stores/main.js";
// import EmailModal from "@/components/Modal/EmailModal.vue";
import UpdateModal from "@/components/Modal/UpdateModal.vue";
import WelcomeModal from "@/components/Modal/WelcomeModal.vue";
import BaseIcon from "@/components/BaseIcon.vue";
import NavBar from "@/components/NavBar.vue";
import NavBarItemPlain from "@/components/NavBarItemPlain.vue";
import AsideMenu from "@/components/Menus/AsideMenu.vue";
import FooterBar from "@/components/FooterBar.vue";
import { gameData } from "@/constants";
import BaseButton from "@/components/BaseButton.vue";
const DISCORD_URL = import.meta.env.VITE_DISCORD_URL;
const DOCS_URL = import.meta.env.VITE_DOCS_URL;

const router = useRouter();
const route = useRoute();

const mainStore = useMainStore();

const userLoaded = computed(() => mainStore.userLoaded);
const userCustomize = computed(() => mainStore.userCustomize);

const layoutAsidePadding = "xl:pl-60";

const isAsideMobileExpanded = ref(false);
const isAsideLgActive = ref(false);

router.beforeEach(() => {
  isAsideMobileExpanded.value = false;
  isAsideLgActive.value = false;
});

const menuClick = (event, item) => {
  if (item.isLogout) {
    mainStore.deleteUserSession();
    router.push({
      name: "login",
    });
  }
};

const menuAside = computed(() => {
  const sortedGames = gameData
    .filter((game) => !game.skip)
    .map((game) => ({
      label: game.shortName || game.name,
      to: `/games/${game.id}`,
    }));

  const sortedArcades = mainStore.userArcades.map((arcade) => ({
    label: arcade.name,
    to: `/arcade/${arcade.id}`,
  }));

  const adminMenu = [
    {
      label: "Dashboard",
      to: "/admin",
    },
    {
      label: "Onboarding",
      to: "/admin/onboarding",
    },
    {
      label: "Network Maintenance",
      to: "/admin/maint",
    },
    {
      label: "Events",
      to: "/admin/events",
    },
    {
      label: "API",
      to: "/admin/api",
    },
    {
      label: "Arcades",
      to: "/admin/arcades",
    },
    {
      label: "Users",
      to: "/admin/users",
    },
    {
      label: "News",
      to: "/admin/news",
    },
    {
      label: "OTA Updates",
      to: "/admin/ota",
    },
  ];

  var sideMenu = [{ to: "/", icon: PhMonitor, label: "Dashboard" }];

  if (mainStore.userAdmin) {
    sideMenu.push({
      label: "Admin",
      icon: PhCrown,
      menu: adminMenu,
    });
  }

  if (sortedGames.length) {
    sideMenu.push({
      label: "Games",
      icon: PhJoystick,
      menu: sortedGames,
    });
  }

  sideMenu.push({
    label: "My Content",
    icon: PhFilmSlate,
    menu: [
      {
        label: "Play Videos",
        to: `/profile/videos`,
      },
      {
        label: "Game Images",
        to: `/profile/content`,
      },
    ],
  });

  if (sortedArcades.length) {
    sideMenu.push({
      label: "My Arcades",
      icon: PhStorefront,
      menu: sortedArcades,
    });
  }

  sideMenu.push({
    to: "/profile/export",
    icon: PhArchive,
    label: "Data Export",
  });

  sideMenu.push({
    label: "Claim Arcade",
    icon: PhStackPlus,
    to: `/arcade/claim`,
  });

  sideMenu.push({ to: "/news", icon: PhArchive, label: "News Archive" });
  sideMenu.push({
    to: "/changelog",
    icon: PhGitMerge,
    label: "Changelog Archive",
  });

  if (mainStore.userAdmin) {
    sideMenu.push({
      label: "Developer Portal",
      icon: PhCode,
      to: "/developer",
    });
  }

  return sideMenu;
});
</script>

<template>
  <div
    :key="route.fullPath"
    :class="{
      'overflow-hidden lg:overflow-visible': isAsideMobileExpanded,
    }"
  >
    <template v-if="userLoaded">
      <WelcomeModal>
        <UpdateModal />
      </WelcomeModal>
      <!-- <EmailModal class="transition-opacity duration-300 ease-out" /> -->
    </template>
    <div
      v-if="userLoaded"
      :class="[layoutAsidePadding, { 'ml-60 lg:ml-0': isAsideMobileExpanded }]"
      class="pt-14 min-h-screen w-screen lg:w-auto bg-slate-800 dark:text-slate-100 transition-position duration-150 ease-in-out"
    >
      <NavBar
        :menu="menuNavBar"
        :class="[
          layoutAsidePadding,
          { 'ml-60 lg:ml-0': isAsideMobileExpanded },
          'opacity-95',
        ]"
        @menu-click="menuClick"
      >
        <NavBarItemPlain
          display="flex lg:hidden"
          @click.prevent="isAsideMobileExpanded = !isAsideMobileExpanded"
        >
          <BaseIcon
            :icon="PhCaretDoubleLeft"
            :size="24"
            fill="bold"
            class="flex-none transition-transform duration-150 ease-in-out"
            :class="[isAsideMobileExpanded ? 'rotate-0' : 'rotate-180']"
          />
        </NavBarItemPlain>
        <NavBarItemPlain
          display="hidden lg:flex xl:hidden"
          @click.prevent="isAsideLgActive = true"
        >
          <BaseIcon :icon="PhDotsThreeCircle" size="24" />
        </NavBarItemPlain>

        <template v-if="!userCustomize.hideQuickLinks">
          <div class="h-full flex place-items-center ml-4 gap-4">
            <BaseButton
              small
              label="Discord"
              :icon="PhDiscordLogo"
              color="info"
              :href="DISCORD_URL"
              target="_blank"
            />
            <BaseButton
              small
              label="Docs"
              :icon="PhTextAa"
              color="info"
              :href="DOCS_URL"
              target="_blank"
            />
          </div>
        </template>
      </NavBar>
      <AsideMenu
        :is-aside-mobile-expanded="isAsideMobileExpanded"
        :is-aside-lg-active="isAsideLgActive"
        :menu="menuAside"
        @menu-click="menuClick"
        @aside-lg-close-click="isAsideLgActive = false"
      />
      <div class="animated animatedFadeInUp fadeInUp">
        <slot />
        <FooterBar />
      </div>
    </div>
  </div>
</template>

<style>
/* Animation */

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 10px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 10px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.animated {
  animation-duration: 0.7s;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
}

.animatedFadeInUp {
  opacity: 0;
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

.arrow {
  color: white;
}

.next-page__click-button {
  color: white;
}
</style>
