"use client"

import { useIntl } from "react-intl"

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

import { CancellationRuleEnum } from "@/constants/booking"
import { dt } from "@/lib/dt"

import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

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

import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"

export default function Room({
  booking,
  checkInTime,
  checkOutTime,
  img,
  roomName,
}: RoomProps) {
  const intl = useIntl()
  const lang = useLang()

  const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
  const fromDate = dt(booking.checkInDate).locale(lang)
  const toDate = dt(booking.checkOutDate).locale(lang)

  const isFlexBooking =
    booking.rateDefinition.cancellationRule ===
    CancellationRuleEnum.CancellableBefore6PM
  const isChangeBooking =
    booking.rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
  return (
    <article className={styles.room}>
      <header className={styles.header}>
        <div className={styles.benefits}>
          {booking.rateDefinition.isMemberRate ? (
            <>
              <MaterialIcon
                color="Icon/Feedback/Success"
                icon="check_circle"
                size={20}
              />
              <Caption>
                {intl.formatMessage({ id: "Membership benefits applied" })}
              </Caption>
            </>
          ) : (
            <>
              <MaterialIcon
                color="Icon/Interactive/Accent"
                icon="cancel"
                size={20}
              />
              <Caption>
                {intl.formatMessage({ id: "No membership benefits applied" })}
              </Caption>
            </>
          )}
        </div>
        {booking.guaranteeInfo && (
          <div className={styles.benefits}>
            <MaterialIcon
              icon="check"
              color="Icon/Feedback/Success"
              size={20}
            />
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p>
                <strong>
                  {intl.formatMessage({ id: "Booking guaranteed." })}
                </strong>{" "}
                {intl.formatMessage({
                  id: "Your room will remain available for check-in even after 18:00.",
                })}
              </p>
            </Typography>
          </div>
        )}
      </header>
      <div className={styles.booking}>
        <Image
          alt={img.metaData.altText}
          className={styles.img}
          focalPoint={{ x: 50, y: 50 }}
          height={204}
          src={img.imageSizes.medium}
          style={{ borderRadius: "var(--Corner-radius-Medium)" }}
          title={img.metaData.title}
          width={204}
        />
        <div className={styles.roomDetails}>
          <div className={styles.roomName}>
            <Subtitle color="uiTextHighContrast" type="two">
              {roomName}
            </Subtitle>
            <Link color="burgundy" href="" variant="icon">
              {intl.formatMessage({ id: "View room details" })}
              <MaterialIcon
                icon="chevron_right"
                size={20}
                color="CurrentColor"
              />
            </Link>
          </div>
          <ul className={styles.details}>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Check-in" })}
              </Body>
              <Body color="uiTextHighContrast">
                {intl.formatMessage(
                  { id: "{checkInDate} from {checkInTime}" },
                  {
                    checkInDate: fromDate.format("ddd, D MMM"),
                    checkInTime: checkInTime,
                  }
                )}
              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Check-out" })}
              </Body>
              <Body color="uiTextHighContrast">
                {intl.formatMessage(
                  { id: "{checkOutDate} from {checkOutTime}" },
                  {
                    checkOutDate: toDate.format("ddd, D MMM"),
                    checkOutTime: checkOutTime,
                  }
                )}
              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Cancellation policy" })}
              </Body>
              <Body color="uiTextHighContrast">
                {booking.rateDefinition.cancellationText}
              </Body>
            </li>
            {isFlexBooking || isChangeBooking ? (
              <li className={styles.listItem}>
                <Body color="uiTextPlaceholder">
                  {intl.formatMessage({ id: "Rebooking" })}
                </Body>
                <Body color="uiTextHighContrast">
                  {intl.formatMessage(
                    { id: "Until {time}, {date}" },
                    { time: "18:00", date: fromDate.format("dddd D MMM") }
                  )}
                </Body>
              </li>
            ) : null}
          </ul>
          <div className={styles.guest}>
            <Body color="uiTextPlaceholder">
              {intl.formatMessage({ id: "Main guest" })}
            </Body>
            <Body color="uiTextHighContrast">{guestName}</Body>
            {booking.guest.membershipNumber ? (
              <Body color="uiTextHighContrast">
                {intl.formatMessage(
                  { id: "Friend no. {value}" },
                  {
                    value: booking.guest.membershipNumber,
                  }
                )}
              </Body>
            ) : null}
            {booking.guest.phoneNumber ? (
              <Body color="uiTextHighContrast">
                {booking.guest.phoneNumber}
              </Body>
            ) : null}
            {booking.guest.email ? (
              <Body color="uiTextHighContrast">{booking.guest.email}</Body>
            ) : null}
          </div>
        </div>
      </div>
    </article>
  )
}
