"use client"
import { useIntl } from "react-intl"

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

import { membershipTermsAndConditions } from "@/constants/webHrefs"

import LoginButton from "@/components/LoginButton"
import Button from "@/components/TempDesignSystem/Button"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import { useRoomContext } from "@/contexts/Details/Room"
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"
import { CurrencyEnum } from "@/types/enums/currency"

export default function JoinScandicFriendsCard({
  name = "join",
}: JoinScandicFriendsCardProps) {
  const lang = useLang()
  const intl = useIntl()
  const {
    room,
    actions: { updateJoin },
  } = useRoomContext()

  function onChange(event: { target: { value: boolean } }) {
    updateJoin(event.target.value)
  }

  if (!("member" in room.roomRate) || !room.roomRate.member) {
    return null
  }

  return (
    <div className={styles.cardContainer}>
      <Typography variant="Title/Subtitle/md">
        <h2 className={styles.priceContainer}>
          <span>
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            {`${intl.formatMessage({
              defaultMessage: "Get the member room price",
            })}: `}
          </span>
          <span className={styles.price}>
            {formatPrice(
              intl,
              room.roomRate.member.localPrice.pricePerStay ?? 0,
              room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
            )}
          </span>
        </h2>
      </Typography>
      <Checkbox
        name={name}
        className={styles.checkBox}
        registerOptions={{ onChange }}
      >
        <Typography variant="Body/Paragraph/mdRegular">
          <div>
            {intl.formatMessage({
              defaultMessage: "Join Scandic Friends now",
            })}
          </div>
        </Typography>
      </Checkbox>

      <Button size="small" color="Primary" asChild>
        <LoginButton
          className={styles.login}
          color="white"
          position="enter details"
          trackingId="join-scandic-friends-enter-details"
        >
          {intl.formatMessage({
            defaultMessage: "Log in",
          })}
        </LoginButton>
      </Button>

      <div className={styles.terms}>
        <Footnote color="uiTextPlaceholder">
          {intl.formatMessage(
            {
              defaultMessage:
                "By joining you accept the <termsAndConditionsLink>Terms and Conditions</termsAndConditionsLink>. The Scandic Friends Membership is valid until further notice, but can at any time be terminated by contacting Scandic Customer Service.",
            },
            {
              termsAndConditionsLink: (str) => (
                <Link
                  textDecoration="underline"
                  size="tiny"
                  target="_blank"
                  href={membershipTermsAndConditions[lang]}
                >
                  {str}
                </Link>
              ),
            }
          )}
        </Footnote>
      </div>
    </div>
  )
}