"use client"

import { DialogTrigger } from "react-aria-components"
import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { getBookedHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"

import { useBookingConfirmationStore } from "@/stores/booking-confirmation"

import { RoomSidePeekContent } from "@/components/SidePeeks/RoomSidePeek/RoomSidePeekContent"
import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"

interface RoomDetailsSidePeekProps {
  roomTypeCode: string
}

export default function RoomDetailsSidePeek({
  roomTypeCode,
}: RoomDetailsSidePeekProps) {
  const { roomCategories } = useBookingConfirmationStore((state) => ({
    roomCategories: state.roomCategories,
  }))
  const room = getBookedHotelRoom(roomCategories, roomTypeCode)
  const intl = useIntl()

  if (!room) {
    return null
  }

  return (
    <DialogTrigger>
      <Button
        variant="Text"
        color="Primary"
        size="Small"
        typography="Body/Supporting text (caption)/smBold"
      >
        {intl.formatMessage({ defaultMessage: "View room details" })}
        <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
      </Button>
      <SidePeekSelfControlled title={room.name}>
        <RoomSidePeekContent room={room} />
      </SidePeekSelfControlled>
    </DialogTrigger>
  )
}