"use client"

import { useRef } from "react"
import { useIntl } from "react-intl"

import Body from "@scandic-hotels/design-system/Body"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"

import useDropdownStore from "@/stores/main-menu"

import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { getInitials } from "@/utils/user"

import Avatar from "../Avatar"
import MainMenuButton from "../MainMenuButton"
import MyPagesMenuContent, { useMyPagesNavigation } from "../MyPagesMenuContent"

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

import type { LoyaltyLevel } from "@scandic-hotels/trpc/routers/contentstack/loyaltyLevel/output"
import type { FriendsMembership, User } from "@scandic-hotels/trpc/types/user"

import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown"

export type MyPagesMenuProps = {
  user: Pick<User, "firstName" | "lastName">
  membership?: FriendsMembership | null
  membershipLevel: LoyaltyLevel | null
}

export default function MyPagesMenu({
  user,
  membership,
  membershipLevel,
}: MyPagesMenuProps) {
  const intl = useIntl()
  const myPagesMenuRef = useRef<HTMLDivElement>(null)

  // Preload navigation content
  useMyPagesNavigation()

  const { toggleDropdown, isMyPagesMenuOpen } = useDropdownStore()

  useHandleKeyUp((event: KeyboardEvent) => {
    if (event.key === "Escape" && isMyPagesMenuOpen) {
      toggleDropdown(DropdownTypeEnum.MyPagesMenu)
    }
  })

  useClickOutside(myPagesMenuRef, isMyPagesMenuOpen, () => {
    toggleDropdown(DropdownTypeEnum.MyPagesMenu)
  })

  return (
    <div className={styles.myPagesMenu} ref={myPagesMenuRef}>
      <MainMenuButton
        onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
      >
        <Avatar initials={getInitials(user.firstName, user.lastName)} />
        <Body textTransform="bold" color="baseTextHighContrast" asChild>
          <span data-hj-suppress>
            {intl.formatMessage(
              {
                defaultMessage: "Hi {firstName}!",
              },
              { firstName: user.firstName }
            )}
          </span>
        </Body>
        <MaterialIcon
          icon="keyboard_arrow_down"
          size={20}
          className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
          color="Icon/Interactive/Accent"
        />
      </MainMenuButton>
      {isMyPagesMenuOpen ? (
        <div className={styles.dropdown}>
          <MyPagesMenuContent
            membershipLevel={membershipLevel}
            user={user}
            membership={membership}
            toggleOpenStateFn={() =>
              toggleDropdown(DropdownTypeEnum.MyPagesMenu)
            }
          />
        </div>
      ) : null}
    </div>
  )
}

export function MyPagesMenuSkeleton() {
  return (
    <div className={styles.myPagesMenu}>
      <MainMenuButton>
        <Avatar />
        <SkeletonShimmer width="10ch" />
        <MaterialIcon
          icon="keyboard_arrow_down"
          size={20}
          className={`${styles.chevron}`}
          color="Icon/Interactive/Accent"
        />
      </MainMenuButton>
    </div>
  )
}
