"use client"
import { useIntl } from "react-intl"

import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
import Button from "@/components/TempDesignSystem/Button"
import Caption from "@/components/TempDesignSystem/Text/Caption"
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,
}: 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 saveProduct = saveRate
    ? roomConfiguration.products.find(
        (product) =>
          product.productType.public.rateCode === saveRate.rateCode ||
          product.productType.member.rateCode === saveRate.rateCode
      )
    : undefined
  const changeProduct = changeRate
    ? roomConfiguration.products.find(
        (product) =>
          product.productType.public.rateCode === changeRate.rateCode ||
          product.productType.member.rateCode === changeRate.rateCode
      )
    : undefined
  const flexProduct = flexRate
    ? roomConfiguration.products.find(
        (product) =>
          product.productType.public.rateCode === flexRate.rateCode ||
          product.productType.member.rateCode === flexRate.rateCode
      )
    : undefined

  return (
    <div className={styles.card}>
      <div className={styles.cardBody}>
        <div className={styles.specification}>
          <Subtitle className={styles.name} type="two">
            {roomConfiguration.roomType}
          </Subtitle>
          <Caption>Room size TBI</Caption>
          <Button intent="text" type="button" size="small" theme="base">
            {intl.formatMessage({ id: "See room details" })}
          </Button>
          <Caption>
            {/*TODO: Handle pluralisation*/}
            {intl.formatMessage(
              {
                id: "Max {nrOfGuests} guests",
                defaultMessage: "Max {nrOfGuests} guests",
              },
              // TODO: Correct number
              { nrOfGuests: 2 }
            )}
            {intl.formatMessage({
              id: "Breakfast included",
            })}
          </Caption>
        </div>

        <FlexibilityOption
          name={intl.formatMessage({ id: "Non-refundable" })}
          value="non-refundable"
          paymentTerm={intl.formatMessage({ id: "Pay now" })}
          product={saveProduct}
        />
        <FlexibilityOption
          name={intl.formatMessage({ id: "Free rebooking" })}
          value="free-rebooking"
          paymentTerm={intl.formatMessage({ id: "Pay now" })}
          product={changeProduct}
        />
        <FlexibilityOption
          name={intl.formatMessage({ id: "Free cancellation" })}
          value="free-cancellation"
          paymentTerm={intl.formatMessage({ id: "Pay later" })}
          product={flexProduct}
        />

        <Button
          type="submit"
          size="small"
          theme="primaryDark"
          className={styles.button}
        >
          {intl.formatMessage({ id: "Choose room" })}
        </Button>
      </div>
      {/* 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>
  )
}