"use client"

import { useIntl } from "react-intl"

import { RateDefinition } from "@/server/routers/hotels/output"

import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import ImageGallery from "../../ImageGallery"

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

import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"

export default function RoomCard({
  rateDefinitions,
  roomConfiguration,
  roomCategories,
  handleSelectRate,
}: RoomCardProps) {
  const intl = useIntl()
  const saveRate = rateDefinitions.find(
    // TODO: Update string when API has decided
    (rate) => rate.cancellationRule === "NonCancellable"
  )
  const changeRate = rateDefinitions.find(
    // TODO: Update string when API has decided
    (rate) => rate.cancellationRule === "Modifiable"
  )
  const flexRate = rateDefinitions.find(
    // TODO: Update string when API has decided
    (rate) => rate.cancellationRule === "CancellableBefore6PM"
  )

  function findProductForRate(rate: RateDefinition | undefined) {
    return rate
      ? roomConfiguration.products.find(
          (product) =>
            product.productType.public?.rateCode === rate.rateCode ||
            product.productType.member?.rateCode === rate.rateCode
        )
      : undefined
  }

  function getPriceForRate(
    rate: typeof saveRate | typeof changeRate | typeof flexRate
  ) {
    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
      ?.generalTerms
  }
  const selectedRoom = roomCategories.find(
    (room) => room.name === roomConfiguration.roomType
  )

  const roomSize = selectedRoom?.roomSize
  const occupancy = selectedRoom?.occupancy.total
  const roomDescription = selectedRoom?.descriptions.short
  const images = selectedRoom?.images
  const mainImage = images?.[0]

  return (
    <div className={styles.card}>
      <div className={styles.cardBody}>
        <div className={styles.specification}>
          <Caption color="uiTextMediumContrast" className={styles.guests}>
            {/*TODO: Handle pluralisation*/}
            {intl.formatMessage(
              {
                id: "booking.guests",
              },
              { nrOfGuests: occupancy }
            )}
          </Caption>
          <Caption color="uiTextMediumContrast">
            {roomSize?.min === roomSize?.max
              ? roomSize?.min
              : `${roomSize?.min}-${roomSize?.max}`}
            m²
          </Caption>
          <Button
            intent="text"
            type="button"
            size="small"
            theme="base"
            className={styles.button}
          >
            {intl.formatMessage({ id: "See room details" })}
            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
          </Button>
        </div>
        <div className={styles.container}>
          <div className={styles.roomDetails}>
            <Subtitle className={styles.name} type="two">
              {roomConfiguration.roomType}
            </Subtitle>
            <Body>{roomDescription}</Body>
          </div>
          <Caption color="uiTextHighContrast">
            {intl.formatMessage({
              id: "Breakfast selection in next step.",
            })}
          </Caption>
          <div className={styles.flexibilityOptions}>
            <FlexibilityOption
              name={intl.formatMessage({ id: "Non-refundable" })}
              value="non-refundable"
              paymentTerm={intl.formatMessage({ id: "Pay now" })}
              product={findProductForRate(saveRate)}
              priceInformation={getPriceForRate(saveRate)}
              handleSelectRate={handleSelectRate}
              roomType={roomConfiguration.roomType}
              roomTypeCode={roomConfiguration.roomTypeCode}
            />
            <FlexibilityOption
              name={intl.formatMessage({ id: "Free rebooking" })}
              value="free-rebooking"
              paymentTerm={intl.formatMessage({ id: "Pay now" })}
              product={findProductForRate(changeRate)}
              priceInformation={getPriceForRate(changeRate)}
              handleSelectRate={handleSelectRate}
              roomType={roomConfiguration.roomType}
              roomTypeCode={roomConfiguration.roomTypeCode}
            />
            <FlexibilityOption
              name={intl.formatMessage({ id: "Free cancellation" })}
              value="free-cancellation"
              paymentTerm={intl.formatMessage({ id: "Pay later" })}
              product={findProductForRate(flexRate)}
              priceInformation={getPriceForRate(flexRate)}
              handleSelectRate={handleSelectRate}
              roomType={roomConfiguration.roomType}
              roomTypeCode={roomConfiguration.roomTypeCode}
            />
          </div>
        </div>
      </div>
      {mainImage && (
        <div className={styles.imageContainer}>
          {roomConfiguration.roomsLeft < 5 && (
            <span className={styles.roomsLeft}>
              <Footnote
                color="burgundy"
                textTransform="uppercase"
              >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
            </span>
          )}
          {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
          {images && (
            <ImageGallery images={images} title={roomConfiguration.roomType} />
          )}
        </div>
      )}
    </div>
  )
}
