"use client"

import { useIntl } from "react-intl"

import { CancellationRuleEnum } from "@/constants/booking"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { formatPrice } from "@/utils/numberFormatting"

import RoomSkeletonLoader from "./RoomSkeletonLoader"

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

import type { BookingConfirmationReceiptRoomProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"

export default function ReceiptRoom({
  roomIndex,
}: BookingConfirmationReceiptRoomProps) {
  const intl = useIntl()
  const room = useBookingConfirmationStore((state) => state.rooms[roomIndex])
  const currencyCode = useBookingConfirmationStore(
    (state) => state.currencyCode
  )

  if (!room) {
    return <RoomSkeletonLoader />
  }
  return (
    <article className={styles.room}>
      <header className={styles.roomHeader}>
        <Body color="uiTextHighContrast">{room.name}</Body>
        {room.rateDefinition.isMemberRate ? (
          <div className={styles.memberPrice}>
            <Body color="red">
              {formatPrice(intl, room.roomPrice, currencyCode)}
            </Body>
          </div>
        ) : (
          <Body color="uiTextHighContrast">
            {formatPrice(intl, room.roomPrice, currencyCode)}
          </Body>
        )}
        <Caption color="uiTextMediumContrast">
          {intl.formatMessage(
            { id: "{totalAdults, plural, one {# adult} other {# adults}}" },
            {
              totalAdults: room.adults,
            }
          )}
        </Caption>
        <Caption color="uiTextMediumContrast">
          {room.rateDefinition.cancellationText}
        </Caption>
        <Modal
          trigger={
            <Button intent="text" className={styles.termsLink}>
              <Link
                color="peach80"
                href=""
                size="small"
                textDecoration="underline"
                variant="icon"
              >
                {intl.formatMessage({ id: "Reservation policy" })}
                <InfoCircleIcon color="peach80" />
              </Link>
            </Button>
          }
          title={room.rateDefinition.cancellationText || ""}
          subtitle={
            room.rateDefinition.cancellationRule ===
            CancellationRuleEnum.CancellableBefore6PM
              ? intl.formatMessage({ id: "Pay later" })
              : intl.formatMessage({ id: "Pay now" })
          }
        >
          <div className={styles.terms}>
            {room.rateDefinition.generalTerms?.map((info) => (
              <Body
                key={info}
                color="uiTextHighContrast"
                className={styles.termsText}
              >
                <CheckIcon
                  color="uiSemanticSuccess"
                  width={20}
                  height={20}
                  className={styles.termsIcon}
                ></CheckIcon>
                {info}
              </Body>
            ))}
          </div>
        </Modal>
      </header>
      <div className={styles.entry}>
        <Body color="uiTextHighContrast">{room.bedDescription}</Body>
        <Body color="uiTextHighContrast">
          {formatPrice(intl, 0, currencyCode)}
        </Body>
      </div>
      <div className={styles.entry}>
        <Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
        {(room.rateDefinition.breakfastIncluded ?? room.breakfastIncluded) ? (
          <Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
        ) : null}
        {room.selectedBreakfast ? (
          <Body color="uiTextHighContrast">
            {formatPrice(
              intl,
              room.selectedBreakfast.totalPrice,
              room.selectedBreakfast.currency
            )}
          </Body>
        ) : null}
      </div>
    </article>
  )
}
