"use client"

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

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

import { logout } from "@/constants/routes/handleAuth"
import { trpc } from "@/lib/trpc/client"

import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

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

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 color="subtle" className={styles.divider} />

            <PrimaryLinks toggleOpenStateFn={toggleOpenStateFn} />

            <Divider color="subtle" 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()
  return trpc.navigation.myPages.useQuery({
    lang: lang,
  })
}