"use client"

import FocusLock from "react-focus-lock"
import { useIntl } from "react-intl"

import Caption from "@scandic-hotels/design-system/Caption"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { trpc } from "@scandic-hotels/trpc/client"

import { logout } from "@/constants/routes/handleAuth"

import useLang from "@/hooks/useLang"

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

import type { MyPagesLinkKey } from "@scandic-hotels/trpc/routers/navigation/mypages/MyPagesLink"

import type { MyPagesMenuProps } from "../MyPagesMenu"

type Props = MyPagesMenuProps & { toggleOpenStateFn: () => void }

export default function MyPagesMenuContent({
  membership,
  toggleOpenStateFn,
  user,
  membershipLevel,
}: Props) {
  const intl = useIntl()
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const primaryLinks = myPagesNavigation?.primaryLinks ?? []
  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []

  const membershipPoints = membership?.currentPoints
  const introClassName =
    membershipLevel && membershipPoints
      ? `${styles.intro}`
      : `${styles.intro} ${styles.noMembership}`

  if (primaryLinks.length === 0 && secondaryLinks.length === 0) {
    return null
  }

  return (
    <FocusLock returnFocus={true}>
      <nav className={styles.myPagesMenuContent}>
        <div className={introClassName}>
          <Subtitle type="two" className={styles.userName}>
            {intl.formatMessage(
              {
                defaultMessage: "Hi {firstName}!",
              },
              { firstName: user.firstName }
            )}
          </Subtitle>
          {membershipLevel && membershipPoints ? (
            <Caption className={styles.friendTypeWrapper}>
              <span className={styles.friendType}>{membershipLevel.name}</span>
              <span>
                {intl.formatMessage(
                  {
                    defaultMessage: "{pointsAmount, number} points",
                  },
                  { pointsAmount: membershipPoints }
                )}
              </span>
            </Caption>
          ) : null}
        </div>

        <ul className={styles.groups}>
          <li>
            <Divider className={styles.divider} />

            <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />

            <Divider className={styles.divider} />
            <SecondaryLinks toggleOpenStateFn={toggleOpenStateFn} />
          </li>
        </ul>
      </nav>
    </FocusLock>
  )
}

function PrimaryLinks({
  toggleOpenStateFn,
}: {
  toggleOpenStateFn: () => void
}) {
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const primaryLinks = myPagesNavigation?.primaryLinks ?? []

  return (
    <ul className={styles.menuItems}>
      {primaryLinks.map((link, i) => (
        <li key={link.href + i}>
          <Link
            href={link.href}
            onClick={toggleOpenStateFn}
            variant="menu"
            weight="bold"
            className={styles.link}
          >
            {link.text}
            <MaterialIcon
              icon="arrow_forward"
              className={styles.arrow}
              color="CurrentColor"
            />
          </Link>
        </li>
      ))}
    </ul>
  )
}

function SecondaryLinks({
  toggleOpenStateFn,
}: {
  toggleOpenStateFn: () => void
}) {
  const intl = useIntl()
  const lang = useLang()
  const { data: myPagesNavigation } = useMyPagesNavigation()

  const secondaryLinks = myPagesNavigation?.secondaryLinks ?? []

  return (
    <ul className={styles.menuItems}>
      {secondaryLinks.map((link, i) => (
        <li key={link.href + i}>
          <Link
            href={link.href}
            onClick={toggleOpenStateFn}
            variant="menu"
            className={styles.link}
          >
            {link.text}
            <MaterialIcon
              icon="arrow_forward"
              className={styles.arrow}
              color="Icon/Interactive/Default"
            />
          </Link>
        </li>
      ))}
      <li>
        <Link
          href={logout[lang]}
          prefetch={false}
          variant="menu"
          className={styles.link}
        >
          {intl.formatMessage({
            defaultMessage: "Log out",
          })}
        </Link>
      </li>
    </ul>
  )
}

export const useMyPagesNavigation = () => {
  const lang = useLang()
  const intl = useIntl()

  const MyPagesLinkTranslationMap: Record<MyPagesLinkKey, string> = {
    overview: intl.formatMessage({
      defaultMessage: "Overview",
    }),
    points: intl.formatMessage({
      defaultMessage: "My points",
    }),
    stays: intl.formatMessage({
      defaultMessage: "My stays",
    }),
    benefits: intl.formatMessage({
      defaultMessage: "My benefits",
    }),
    partnerSas: intl.formatMessage({
      defaultMessage: "Scandic ♥ SAS",
    }),
    teamMemberCard: intl.formatMessage({
      defaultMessage: "Team Member Card",
    }),
    scandicFriends: intl.formatMessage({
      defaultMessage: "About Scandic Friends",
    }),
    profile: intl.formatMessage({
      defaultMessage: "My profile",
    }),
  }

  const result = trpc.navigation.myPages.useQuery({
    lang: lang,
  })

  if (result.data) {
    const primaryLinks = result.data.primaryLinks.map((link) => ({
      ...link,
      text: MyPagesLinkTranslationMap[link.key],
    }))
    const secondaryLinks = result.data.secondaryLinks.map((link) => ({
      ...link,
      text: MyPagesLinkTranslationMap[link.key],
    }))

    return { ...result, data: { primaryLinks, secondaryLinks } }
  }

  return { ...result, data: null }
}