"use client"
import { useState } from "react"
import { Button as ButtonRAC } from "react-aria-components"

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

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

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

import { SidePeekEnum } from "@/types/sidepeek"
import type { Room as MyStayRoom } from "@/types/stores/my-stay"
import type { SafeUser } from "@/types/user"

interface RoomDetailsSidePeekProps {
  booking: MyStayRoom
  user: SafeUser
}

export default function RoomDetailsSidePeek({
  booking,
  user,
}: RoomDetailsSidePeekProps) {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <ButtonRAC
        className={styles.trigger}
        onPress={() => {
          setIsOpen(true)
          trackOpenSidePeekEvent({
            name: SidePeekEnum.bookedRoomDetails,
            hotelId: booking.hotelId,
            includePathname: true,
          })
        }}
      >
        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
      </ButtonRAC>
      <SidePeekSelfControlled
        title={booking.room?.name ?? booking.roomName}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <BookedRoomSidePeekContent room={booking} user={user} />
      </SidePeekSelfControlled>
    </>
  )
}