import { dt } from "@/lib/dt"

import {
  CheckCircleIcon,
  ChevronRightSmallIcon,
  CrossCircle,
} from "@/components/Icons"
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 { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

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

export default async function Room({ booking, img, roomName }: RoomProps) {
  const intl = await getIntl()
  const lang = getLang()

  const fromDate = dt(booking.checkInDate).locale(lang)
  const toDate = dt(booking.checkOutDate).locale(lang)
  return (
    <article className={styles.room}>
      <header className={styles.header}>
        <div>
          {/* <Subtitle color="mainGrey60" type="two">
          {intl.formatMessage({ id: "Room" })} 1
        </Subtitle> */}
          <Subtitle color="uiTextHighContrast" type="two">
            {`${intl.formatMessage({ id: "Reservation number" })} ${booking.confirmationNumber}`}
          </Subtitle>
        </div>
        <div className={styles.benefits}>
          {booking.rateDefinition.isMemberRate ? (
            <>
              <CheckCircleIcon color="green" height={20} width={20} />
              <Caption>
                {intl.formatMessage({ id: "Membership benefits applied" })}
              </Caption>
            </>
          ) : (
            <>
              <CrossCircle color="red" height={20} width={20} />
              <Caption>
                {intl.formatMessage({ id: "No membership benefits applied" })}
              </Caption>
            </>
          )}
        </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" })}
              <ChevronRightSmallIcon color="burgundy" />
            </Link>
          </div>
          <ul className={styles.details}>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Check-in" })}
              </Body>
              <Body color="uiTextHighContrast">
                {`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Check-out" })}
              </Body>
              <Body color="uiTextHighContrast">
                {`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Breakfast" })}
              </Body>
              <Body color="uiTextHighContrast">N/A</Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Cancellation policy" })}
              </Body>
              <Body color="uiTextHighContrast">
                {booking.rateDefinition.cancellationText}
              </Body>
            </li>
            <li className={styles.listItem}>
              <Body color="uiTextPlaceholder">
                {intl.formatMessage({ id: "Rebooking" })}
              </Body>
              <Body color="uiTextHighContrast">N/A</Body>
            </li>
          </ul>
          <div className={styles.guest}>
            <Body color="uiTextPlaceholder">
              {intl.formatMessage({ id: "Main guest" })}
            </Body>
            <Body color="uiTextHighContrast">
              {`${booking.guest.firstName} ${booking.guest.lastName}`}
            </Body>
            {booking.guest.membershipNumber ? (
              <Body color="uiTextHighContrast">
                {`${intl.formatMessage({ id: "Friend no." })} ${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>
  )
}
