"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 styles from "./roomCard.module.css"

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

export default function RoomCard({
  rateDefinitions,
  roomConfiguration,
  roomCategories,
}: 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"
  )

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

  const getPriceForRate = (
    rate: typeof saveRate | typeof changeRate | typeof flexRate
  ) => {
    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
      ?.generalTerms
  }

  const roomSize = roomCategories.find(
    (category) => category.attributes.name === roomConfiguration.roomType
  )?.attributes.roomSize

  const occupancy = roomCategories.find(
    (category) => category.attributes.name === roomConfiguration.roomType
  )?.attributes.occupancy.total

  const roomDescription = roomCategories.find(
    (room) => room.attributes.name === roomConfiguration.roomType
  )?.attributes.content.texts.descriptions.short

  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} 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>
            <FlexibilityOption
              name={intl.formatMessage({ id: "Non-refundable" })}
              value="non-refundable"
              paymentTerm={intl.formatMessage({ id: "Pay now" })}
              product={findProductForRate(saveRate)}
              priceInformation={getPriceForRate(saveRate)}
            />
            <FlexibilityOption
              name={intl.formatMessage({ id: "Free rebooking" })}
              value="free-rebooking"
              paymentTerm={intl.formatMessage({ id: "Pay now" })}
              product={findProductForRate(changeRate)}
              priceInformation={getPriceForRate(changeRate)}
            />
            <FlexibilityOption
              name={intl.formatMessage({ id: "Free cancellation" })}
              value="free-cancellation"
              paymentTerm={intl.formatMessage({ id: "Pay later" })}
              product={findProductForRate(flexRate)}
              priceInformation={getPriceForRate(flexRate)}
            />
          </div>
        </div>
      </div>

      <div className={styles.imageContainer}>
        <span className={styles.roomsLeft}>
          <Footnote
            color="burgundy"
            textTransform="uppercase"
          >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
        </span>
        {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          alt={intl.formatMessage({ id: "A photo of the room" })}
          // TODO: Correct image URL
          src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
        />
      </div>
    </div>
  )
}
