"use client"

import { useIntl } from "react-intl"

import { privacyPolicy } from "@/constants/currentWebHrefs"

import { CheckIcon } from "@/components/Icons"
import LoginButton from "@/components/LoginButton"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import useLang from "@/hooks/useLang"
import { formatPrice } from "@/utils/numberFormatting"

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

import type { JoinScandicFriendsCardProps } from "@/types/components/hotelReservation/enterDetails/details"

export default function JoinScandicFriendsCard({
  name,
  memberPrice,
}: JoinScandicFriendsCardProps) {
  const lang = useLang()
  const intl = useIntl()

  const list = [
    { title: intl.formatMessage({ id: "Earn bonus nights & points" }) },
    { title: intl.formatMessage({ id: "Get member benefits & offers" }) },
    { title: intl.formatMessage({ id: "Join at no cost" }) },
  ]

  const saveOnJoiningLabel = intl.formatMessage(
    {
      id: "Only pay {amount}",
    },
    {
      amount: formatPrice(
        intl,
        memberPrice?.price ?? 0,
        memberPrice?.currency ?? "SEK"
      ),
    }
  )

  return (
    <div className={styles.cardContainer}>
      <Checkbox name={name} className={styles.checkBox}>
        <div>
          {memberPrice ? (
            <Caption type="label" textTransform="uppercase" color="red">
              {saveOnJoiningLabel}
            </Caption>
          ) : null}
          <Caption
            type="label"
            textTransform="uppercase"
            color="uiTextHighContrast"
          >
            {intl.formatMessage({ id: "Join Scandic Friends" })}
          </Caption>
        </div>
      </Checkbox>

      <Footnote color="uiTextHighContrast" className={styles.login}>
        {intl.formatMessage({ id: "Already a friend?" })}{" "}
        <LoginButton
          color="burgundy"
          position="enter details"
          trackingId="join-scandic-friends-enter-details"
          variant="breadcrumb"
        >
          {intl.formatMessage({ id: "Log in" })}
        </LoginButton>
      </Footnote>

      <div className={styles.list}>
        {list.map((item) => (
          <Caption
            key={item.title}
            color="uiTextPlaceholder"
            className={styles.listItem}
          >
            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
          </Caption>
        ))}
      </div>
      <div className={styles.terms}>
        <Footnote color="uiTextPlaceholder">
          {intl.formatMessage<React.ReactNode>(
            {
              id: "signup.terms",
            },
            {
              termsLink: (str) => (
                <Link
                  variant="default"
                  textDecoration="underline"
                  size="tiny"
                  target="_blank"
                  color="uiTextPlaceholder"
                  href={privacyPolicy[lang]}
                >
                  {str}
                </Link>
              ),
            }
          )}
        </Footnote>
      </div>
    </div>
  )
}