import { getName } from "@/lib/trpc/memoizedRequests"

import ArrowRight from "@/components/Icons/ArrowRight"
import { ScandicFriends } from "@/components/Levels"
import LoginButton from "@/components/LoginButton"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

import Contact from "./Contact"
import ReadMore from "./ReadMore"

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

import type { JoinLoyaltyContactProps } from "@/types/components/sidebar/joinLoyaltyContact"

export default async function JoinLoyaltyContact({
  block,
}: JoinLoyaltyContactProps) {
  const [intl, user] = await Promise.all([getIntl(), getName()])

  // Check if we have user, that means we are logged in.
  if (user) {
    return null
  }

  return (
    <section className={styles.joinLoyaltyContainer}>
      <article className={styles.wrapper}>
        <Title as="h4" level="h3" textTransform="capitalize">
          {block.title}
        </Title>
        <ScandicFriends color="red" />
        {block.preamble ? (
          <Body className={styles.preamble}>{block.preamble}</Body>
        ) : null}
        {block.button ? (
          <Button
            asChild
            intent="primary"
            theme="base"
            className={styles.button}
          >
            <Link
              href={block.button.href}
              color="white"
              target={block.button.openInNewTab ? "_blank" : "_self"}
            >
              {block.button.title}
            </Link>
          </Button>
        ) : null}
        <section className={styles.loginContainer}>
          <Body>{intl.formatMessage({ id: "Already a friend?" })}</Body>
          <LoginButton
            className={styles.link}
            trackingId="loginJoinLoyalty"
            position="join scandic friends sidebar"
            color="burgundy"
          >
            <ArrowRight
              color="burgundy"
              className={styles.icon}
              height="20"
              width="20"
            />
            {intl.formatMessage({ id: "Log in here" })}
          </LoginButton>
        </section>
      </article>
      {block.contact ? <Contact contactBlock={block.contact} /> : null}
      <ReadMore />
    </section>
  )
}
