"use client"

import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { BookingStatusEnum } from "@/constants/booking"
import { trpc } from "@/lib/trpc/client"
import { getBookedHotelRoom } from "@/server/routers/booking/utils"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import { convertToChildType } from "@/components/HotelReservation/utils/convertToChildType"
import { getPriceType } from "@/components/HotelReservation/utils/getPriceType"
import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"

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

import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
import { BreakfastPackageEnum } from "@/types/enums/breakfast"
import { PackageTypeEnum } from "@/types/enums/packages"
import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"

interface RoomDetailsSidePeekProps {
  booking: BookingConfirmationSchema
  roomNumber?: number
}

export default function RoomDetailsSidePeek({
  booking,
  roomNumber = 1,
}: RoomDetailsSidePeekProps) {
  const intl = useIntl()
  const user = trpc.user.getSafely.useQuery()
  const roomCategories = useBookingConfirmationStore(
    (state) => state.roomCategories
  )
  const hotelRoom = getBookedHotelRoom(roomCategories, booking.roomTypeCode)

  const breakfastPackage = booking.packages.find(
    (pkg) => pkg.code === BreakfastPackageEnum.REGULAR_BREAKFAST
  )

  const breakfast: Omit<BreakfastPackage, "requestedPrice"> | null =
    breakfastPackage
      ? {
          code: breakfastPackage.code,
          description: breakfastPackage.description,
          localPrice: {
            currency: breakfastPackage.currency,
            price: breakfastPackage.unitPrice,
            totalPrice: breakfastPackage.totalPrice,
          },
          packageType: PackageTypeEnum.BreakfastAdult,
        }
      : null

  const childrenInRoom = convertToChildType(
    booking.childrenAges,
    booking.childBedPreferences
  )

  const priceType = getPriceType(
    booking.cheques,
    booking.roomPoints,
    booking.vouchers
  )

  const featuresPackages = booking.packages.filter(
    (pkg) =>
      pkg.code === RoomPackageCodeEnum.PET_ROOM ||
      pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM ||
      pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
  )

  const packages = featuresPackages.map((pkg) => ({
    code: pkg.code as RoomPackageCodeEnum,
    description: pkg.description,
    inventories: [],
    itemCode: "",
    localPrice: {
      currency: pkg.currency,
      price: pkg.unitPrice,
      totalPrice: pkg.totalPrice,
    },
    requestedPrice: {
      currency: pkg.currency,
      price: pkg.unitPrice,
      totalPrice: pkg.totalPrice,
    },
  }))

  const room = {
    ...booking,
    bedType: {
      description: hotelRoom?.bedType.mainBed.description ?? "",
      roomTypeCode: hotelRoom?.bedType.code ?? "",
    },
    breakfast,
    childrenInRoom,
    isCancelled: booking.reservationStatus === BookingStatusEnum.Cancelled,
    packages,
    priceType,
    roomName: hotelRoom?.name ?? "",
    roomNumber,
    terms: booking.rateDefinition.cancellationText,
  }
  return (
    <DialogTrigger>
      <Typography variant="Body/Supporting text (caption)/smBold">
        <ButtonRAC className={styles.trigger}>
          <span>
            {intl.formatMessage({ defaultMessage: "View room details" })}
          </span>
          <MaterialIcon color="CurrentColor" icon="chevron_right" size={20} />
        </ButtonRAC>
      </Typography>
      <BookedRoomSidePeek
        hotelRoom={hotelRoom}
        room={room}
        user={user.data ?? null}
      />
    </DialogTrigger>
  )
}