import { MembershipLevelEnum } from "@/constants/membershipLevels"
import {
  getMembershipLevelSafely,
  getMyPagesNavigation,
  getName,
} from "@/lib/trpc/memoizedRequests"
import { serverClient } from "@/lib/trpc/server"

import LoginButton from "@/components/LoginButton"
import { getIntl } from "@/i18n"

import Avatar from "../Avatar"
import MyPagesMenu, { MyPagesMenuSkeleton } from "../MyPagesMenu"
import MyPagesMobileMenu, {
  MyPagesMobileMenuSkeleton,
} from "../MyPagesMobileMenu"

import styles from "./myPagesMenuWrapper.module.css"

export default async function MyPagesMenuWrapper() {
  const [intl, myPagesNavigation, user, membership] = await Promise.all([
    getIntl(),
    getMyPagesNavigation(),
    getName(),
    getMembershipLevelSafely(),
  ])

  const membershipLevel = membership?.membershipLevel
    ? await serverClient().contentstack.loyaltyLevels.byLevel({
        level: MembershipLevelEnum[membership.membershipLevel],
      })
    : null

  return (
    <>
      {user ? (
        <>
          <MyPagesMenu
            membershipLevel={membershipLevel}
            membership={membership}
            navigation={myPagesNavigation}
            user={user}
          />
          <MyPagesMobileMenu
            membershipLevel={membershipLevel}
            membership={membership}
            navigation={myPagesNavigation}
            user={user}
          />
        </>
      ) : (
        <LoginButton
          className={styles.loginLink}
          aria-label={intl.formatMessage({ id: "Log in/Join" })}
          position="top menu"
          trackingId="loginStartNewTopMenu"
        >
          <Avatar />
          <span className={styles.loginText}>
            {intl.formatMessage({ id: "Log in/Join" })}
          </span>
        </LoginButton>
      )}
    </>
  )
}

export function MyPagesMenuWrapperSkeleton() {
  return (
    <div>
      <MyPagesMenuSkeleton />
      <MyPagesMobileMenuSkeleton />
    </div>
  )
}