"use client"

import { useIntl } from "react-intl"

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

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { useRoomContext } from "@/contexts/Details/Room"
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 intl = useIntl()
  const { room, roomNr } = useRoomContext()

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

  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: "Pay the member price of {amount} for Room {roomNr}",
    },
    {
      amount: formatPrice(
        intl,
        room.roomRate.member.localPrice.pricePerStay ?? 0,
        room.roomRate.member.localPrice.currency ?? CurrencyEnum.Unknown
      ),
      roomNr,
    }
  )

  return (
    <div className={styles.cardContainer}>
      <Checkbox name={name} className={styles.checkBox}>
        <div>
          <Caption type="label" textTransform="uppercase" color="red">
            {saveOnJoiningLabel}
          </Caption>
          <Caption color="uiTextHighContrast">
            {intl.formatMessage({
              id: "I promise to join Scandic Friends before checking in",
            })}
          </Caption>
        </div>
      </Checkbox>

      <div className={styles.list}>
        {list.map((item) => (
          <Caption
            key={item.title}
            className={styles.listItem}
            color="uiTextPlaceholder"
          >
            <MaterialIcon
              icon="check"
              size={20}
              color="Icon/Interactive/Placeholder"
            />
            {item.title}
          </Caption>
        ))}
      </div>
    </div>
  )
}