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

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

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

import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"

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

import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"

interface LinkedReservationProps {
  bookingPromise: Promise<BookingConfirmation | null>
  index: number
}

export default function LinkedReservation({
  bookingPromise,
  index,
}: LinkedReservationProps) {
  const intl = useIntl()
  const lang = useLang()

  const { addRoomPrice } = useMyStayTotalPriceStore()
  const { addRoomDetails } = useMyStayRoomDetailsStore()

  const bookingConfirmation = use(bookingPromise)
  const { booking, room } = bookingConfirmation ?? {}

  useEffect(() => {
    if (booking) {
      addRoomPrice({
        id: booking.confirmationNumber ?? "",
        totalPrice: booking.totalPrice,
        currencyCode: booking.currencyCode,
        isMainBooking: false,
      })

      // Add room details to the store
      addRoomDetails({
        id: booking.confirmationNumber ?? "",
        roomName: room?.name ?? booking.roomTypeCode ?? "",
        isCancelable: booking.isCancelable,
      })
    }
  }, [booking, room, addRoomPrice, addRoomDetails])

  if (!booking) return null

  const fromDate = dt(booking.checkInDate).locale(lang)
  const toDate = dt(booking.checkOutDate).locale(lang)

  return (
    <article className={styles.linkedReservation}>
      <div className={styles.title}>
        <Subtitle color="burgundy">
          {intl.formatMessage({ id: "Room" }) + " " + (index + 2)}
        </Subtitle>
      </div>
      <div className={styles.details}>
        <Caption textTransform="uppercase" type="bold">
          {intl.formatMessage({ id: "Reference" })} {booking.confirmationNumber}
        </Caption>
        <div>
          <Caption color="uiTextHighContrast">
            {booking.childrenAges.length > 0
              ? intl.formatMessage(
                  { id: "{adults} adults, {children} children" },
                  {
                    adults: booking.adults,
                    children: booking.childrenAges.length,
                  }
                )
              : intl.formatMessage(
                  { id: "{adults} adults" },
                  {
                    adults: booking.adults,
                  }
                )}
          </Caption>
        </div>
      </div>
      <div className={styles.dates}>
        <div className={styles.date}>
          <Caption
            type="bold"
            textTransform="uppercase"
            color="uiTextHighContrast"
          >
            {intl.formatMessage({ id: "Check-in" })}
          </Caption>
          <Caption color="uiTextHighContrast">
            {`${fromDate.format("dddd, D MMMM")} `}
          </Caption>
        </div>
        <div className={styles.date}>
          <Caption
            type="bold"
            textTransform="uppercase"
            color="uiTextHighContrast"
          >
            {intl.formatMessage({ id: "Check-out" })}
          </Caption>
          <Caption color="uiTextHighContrast">
            {`${toDate.format("dddd, D MMMM")} `}
          </Caption>
        </div>
      </div>
    </article>
  )
}