web/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx

"use client"

import { useState } from "react"
import { useIntl } from "react-intl"

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

import { useMyStayStore } from "@/stores/my-stay"

import BookedRoomSidePeekContent from "@/components/SidePeeks/BookedRoomSidePeekContent"
import { trackOpenSidePeekEvent } from "@/utils/tracking"

import { SidePeekEnum } from "@/types/sidepeek"
import type { SafeUser } from "@/types/user"

interface RoomDetailsSidePeekProps {
  user: SafeUser
}

export default function RoomDetailsSidePeek({
  user,
}: RoomDetailsSidePeekProps) {
  const intl = useIntl()
  const { bookedRoom, totalPrice } = useMyStayStore((state) => ({
    bookedRoom: state.bookedRoom,
    totalPrice: state.totalPrice,
  }))

  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <Button
        variant="Text"
        size="Small"
        color="Primary"
        wrapping
        onPress={() => {
          setIsOpen(true)
          trackOpenSidePeekEvent({
            name: SidePeekEnum.bookedRoomDetails,
            hotelId: bookedRoom.hotelId,
            includePathname: true,
          })
        }}
      >
        {intl.formatMessage({
          id: "hotel.seeRoomDetails",
          defaultMessage: "See room details",
        })}
        <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
      </Button>
      <SidePeekSelfControlled
        title={bookedRoom.room?.name ?? bookedRoom.roomName}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <BookedRoomSidePeekContent
          room={bookedRoom}
          user={user}
          totalPriceBooking={totalPrice}
        />
      </SidePeekSelfControlled>
    </>
  )
}